We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Adding dynamic submenus to the customContextMenuItems


I am trying to create dynamic submenus for a contextMenu depending on the row that is selected.

For example, if the row selected has a value in field x, then I would like a submenu within a "Delete" menu that shows this field. However, if the row does not have anything in this field, then this option should not appear in the submenu.

I have tried the following using the OnContextOpen, but with no result.

gridObj.model.contextMenuSettings.subContextMenu["0"].subMenu = ["1","2","3"];

The model gets updated, but the it seems like the context menu has already been generated and this is not refreshing it.

Any ideas would be more than welcomed :)

Kind regards,

1 Reply

VA Venkatesh Ayothi Raman Syncfusion Team October 11, 2016 12:22 PM UTC

Hi Carlos, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement “dynamic submenus for a contextMenu depending on the row that is selected” using rowSelected event in Grid. This event triggers when we rightclick the Grid content. Please refer to the code example, sample and Help document for your convenience, 
Code example: 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData, 
                 . . . 
                contextMenuSettings: { enableContextMenu: true, disableDefaultItems: true, customContextMenuItems: [{ id: 'delete', text: "Delete" }],  }, 
            //Row selected event 
                rowSelected: function (args) { 
                    if (!$("#delete").find("ul").length > 0 && args.data.EmployeeID == 5) //Check the condition if employee id value is equal to 5 
                contextClick: function (args) { 
                    // Code something 
                columns: [ 
          . . . 
        function showSubMenuItem(args) { //Here we can append the sub contextmenu items 
            function showSubMenuItem(args) { 
             //SubcontextMenu generation 
            var ObjUl = $("<ul id='subItems' ></ul>"); //Create a <ul> tag 
            var Objli = $('<li></li>'); //Create a <li> tag 
            var Obja = $('<a></a>'); //Create a <a> tag 
            Objli.addClass("e-customitem e-list"); //Add a specific class for Subcontext menu 
            Obja.addClass("e-menulink");           //Add a specific class for Subcontext menu 
            Obja.text('EmployeeID value is equal to' + " "+ args.data.EmployeeID); // Set the text for subcontext menu 
            Objli.append(Obja);                 //Append the corressponding elements 
            ObjUl.append(Objli);                //Append the corressponding elements 
            $("#delete").append(ObjUl);         //Append the corressponding elements 
        function disableSubMenuItem(args) { 
            if ($("#delete").find("ul").length > 0) 
                $("#subItems").remove();//Here we can remove the subcontext menu item which has employee id not equal to 5 

Note: Here we have shown the subContextMenu when employeeID value has equal to 5, otherwise we have disable the subContextMenu.  

If we misunderstood your requirement, then could you please share the more details about your requirement? 
Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon