Different ContextMenu items on Different TreeView nodes

[Unknown]

Hello,

I am using ContextMenu component on my TreeView component. How can I set different ContextMenu items on different TreeView nodes?

I tried to do it on event beforeOpen, but every time I am getting same context menu.

[Piramanayagam Ramakrishnan]

Hi AC, 

 

Thanks for contacting Syncfusion support. 

 

You can set the different ContextMenu items for different TreeView nodes by using items property and beforeOpen event. Please refer to below code example. 

 

[html] 

 

<ejs-contextmenu id='contextmenu' #menu [items]='menuItems' target='#default' (beforeopen)="onBeforeOpen($event)"></ejs-contextmenu> 

 

[ts] 

 

@ViewChild('menu') 

public menu: ContextMenuComponent 

public menuItems: MenuItemModel[] = [ 

    { text: 'Add New Item' }, 

    { text: 'Remove Item' }, 

]; 

 

public menuItems1: MenuItemModel[] = [ 

    { text: 'Cut' }, 

    { text: 'Copy' }, 

]; 

 

public onBeforeOpen(args: BeforeOpenCloseMenuEventArgs) { 

    // check the target element and change the menu items based on this 

    if (args.event.target.closest('li').classList.contains("text-bold")) 

        this.menu.items = this.menuItems1; 

    else 

        this.menu.items = this.menuItems; 

} 

 

 

For your reference, we have prepared a sample based on this in the link: https://plnkr.co/edit/g199E2o8IWpm3OVcCQG0?p=preview 

 

In the above sample, we have used two ContextMenu, one for normal TreeView nodes and another one for bolded TreeView nodes. 

  

You can refer to the below help document to know more about TreeView and ContextMenu component. 

 

TreeView: https://ej2.syncfusion.com/16.1.37/angular/documentation/treeview/ 

ContextMenu: https://ej2.syncfusion.com/16.1.37/angular/documentation/context-menu/ 

 

Please let us know whether the provided sample is helpful in achieving your requirement. If not, revert with more information to proceed further. 

 

Regards, 

Piramanayagam R 

[Unknown]

Hello,

it is working almost correctly. What if I want different lengths of my context menu? For example one context menu length is 2 and second context menu length is 3. In that case I can not get different lengths of context menu.

For example:

public menuItems: MenuItemModel[] = [ 

    { text: 'Add New Item' }, 

    { text: 'Remove Item' }, 

]; 

 

public menuItems1: MenuItemModel[] = [ 

    { text: 'Cut' }, 

    { text: 'Copy' }, 

    { text: 'Edit' }, 

];

In this case I am also seeing only two first rows in my context menu.

[Piramanayagam Ramakrishnan]

Hi AC, 

 

We suggest you to use the client side hideItems & showItems methods to show the different length of context menu items to different TeeeView node. We have explained about “how to change the menu items dynamically” in below help document.  

  

Help Doc Link: https://ej2.syncfusion.com/angular/documentation/context-menu/how-to.html#change-menu-items-dynamically 

  

Could you please check the above help doc link and get back to us if you need any further assistance on this? 

 

Regards, 

Piramanayagam R