Custom context menu in TreeGrid

Hi support team,

I have 2 points need to support:

1.I have to create some custom context menus when users right-click on the row of treeview, but there is a condition for those, the context menu will be disabled/enable base on condition. For example, as image below, the "context menu 1" is disabled


How could I do it? Could you give me some examples of it?

You can directly adjust on this demo https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp3882912022


2. How do I config the context menu just available on child item of treeview, not in parent item. For example the planing parent item below should not have context menu. Only the child item (Plan budget, Allocate resources, etc.)

 


Regards,

Tho


1 Reply

JR Jagadesh Ram Raajkumar Syncfusion Team July 8, 2021 02:25 PM UTC

Hi Tho,


Thanks for using Syncfusion products.


Query 1: context menu disabled/enable base on condition.

We have achieved your requirement by using ContextMenuOpen event to set Disabled property of the context menu item as true to disable any of the context menu items. In the below code snippet we have disabled context menu item copy for the record with property name as “Child task 1”.


Query 2: context menu disabled for the parent record.

We can prevent the context menu from opening for specific records by settings args.Cancel to true in ContextMenuOpen event. In the below code snippet by comparing the IdMapping and ParentIdMapping field values of the data we have prevented opening of context menu for the parent records.
public void OnContextMenuOpen(ContextMenuOpenEventArgs<HiCoSwc> args)
{
var Keys = TreeData.GroupBy(rec => rec.ParentID).Select(rec => rec.Key.ToString()).ToList(); //To fetch parentID for all records

if (Keys.Contains(args.RowInfo.RowData.ID.ToString())) //Checking whether current opted row for opening contextmenu is present and has value
{
args.Cancel = true;
}
else
{
if (args.RowInfo.RowData.Name == "Child task 1")
{
foreach (var item in args.ContextMenuObj.Items)
{
if (item.Id == "copy")
{
item.Disabled = true; //To disable a context menu item
}
}
}
}
}


We have prepared a sample for your reference which can be downloaded from the below link,
https://www.syncfusion.com/downloads/support/forum/167016/ze/BlazorApp3-798503488


Regards,
Jagadesh Ram


Loader.
Up arrow icon