1. Home
  2. Forum
  3. Blazor
  4. Pass data in OnOpen event of context menu based on TreeNode

Pass data in OnOpen event of context menu based on TreeNode

Hello,

I have a Treeview that is bound to an object collection.  There is also context menu associated with the TreeView. When a user right clicks any given tree node, I need to customize the context menu  by enable/disable or show/hide menu items based on properties of the object bound to that TreeNode.  How can this be achieved?

Thanks in Advance!


1 Reply
IL Indhumathy Loganathan Syncfusion Team September 13, 2021 12:02 PM UTC

Hi Lee, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in TreeView component. We understand that you want to customize the Context Menu items based on the TreeView node value. For your reference, we have prepared a sample where we add and remove Context Menu items based on the Type value of TreeView nodes by using OnOpen event of Context Menu component. 
 
Refer to the below code snippet. 
 
// Datasource for menu items 
public List<MenuItem> MenuItems = new List<MenuItem>{ 
    new MenuItem { Text = "Remove" }, 
}; 
... 
// While opening, Add and Remove the menu items. 
private void BeforeOpenHandler(BeforeOpenCloseMenuEventArgs<MenuItem> e) 
{ 
    //Retrieve node details for the selected node. 
    List<EmployeeData> nodeDetails = tree.GetTreeData(selectedId); 
    //Check whether the node is a A type node. 
    if (nodeDetails[0].Type == "A") 
    { 
        //Remove all items each time. 
        string[] RemoveItem = new string[] { "Edit", "Add" }; 
        menu.RemoveItems(RemoveItem.ToList()); 
        //Add the required menu item. 
        List<MenuItem> InsertAfterItem = new List<MenuItem> 
    { 
            new MenuItem{Text = "Add"} 
        }; 
        menu.InsertAfter(InsertAfterItem, "Remove"); 
    } 
    //Check whether the node is a B type node. 
    else if (nodeDetails[0].Type == "B") 
    { 
        //Remove all items each time. 
        string[] RemoveItem = new string[] { "Edit", "Add" }; 
        menu.RemoveItems(RemoveItem.ToList()); 
        //Add the required menu item. 
        List<MenuItem> InsertAfterItem = new List<MenuItem> 
    { 
            new MenuItem{Text = "Edit"} 
        }; 
        menu.InsertAfter(InsertAfterItem, "Remove"); 
    } 
} 
 
In the above code, we have removed all the menu items each time then added only the required items as Context Menu items. Similar to the above way, you can use your TreeView node value to add and remove Context Menu items. 
 
You can find the sample demonstrating the solution from below link. 
 
 
Also check out the below documentation for reference. 
 
 
 
Please check the shared details and get back to us if you need any further assistance. 
 
Regards, 
Indhumathy L

Loader.
Up arrow icon