Adding dynamic submenus to the customContextMenuItems

[Carlos Rodríguez García]

Hi,

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,

Carlos

[Venkatesh Ayothi Raman]

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: 

<Grid> 

$("#Grid").ejGrid({ 

                // 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 

                        showSubMenuItem(args); 

                    else 

                        disableSubMenuItem(args); 

                  

                }, 

                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 

        } 

    </script> 

Sample: http://jsplayground.syncfusion.com/adhvhakf 

Help document: https://help.syncfusion.com/js/api/ejgrid#events:rowselected  

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

Screenshot1: 

 

Screenshot2: 

 

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

Regards, 

Venkatesh Ayothiraman.