Adding/removing submenu items

[Ivica]

I am trying to construct a context menu dynamically, and I'm looking for a way to change submenu items dynamically. For example, in the menu below, I need to build the whole 'Colors' submenu every time the menu is shown, since the underlying data can be changed in many ways. Is there a way of calling menuObj.removeItems with item IDs, instead of text? My sub menu items are complex and include color pickers and other HTML elements, not just text.

Is it possible to remove all items in a submenu?

menuObj = new ej.navigations.ContextMenu({

items: [

{text: 'Add', id: 'addB'},

{text: 'Remove', id: 'delB'},

{text: 'Editing', separator: true},

{

text: 'Colors',

items: [

{text: 'c1'}

]

}],

                             beforeOpen: function (args) {

                                                                       // how to rewrite the whole 'Colors' sub menu on each opening?

                                                                 }

                                                       });

[Gayathri KarunaiAnandam]

Hi Ivica, 

Greetings from Syncfusion Support. 

We have checked your reported query and we can remove Menu bar items using id of the menu items as demonstrated in the given code snippet, 

Code Snippet 

  

// Initialize ContextMenu component 

 

let menuObj: ContextMenu = new ContextMenu(menuOptions, "#contextmenu"); 

menuObj.removeItems(["remove"], true); 

  

For your reference, we have created a Menubar sample to change submenu items dynamically 

 

Sample link: https://stackblitz.com/edit/1pvbx6-6tzwkv?file=index.ts 

 

Regards, 

Gayathri K