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.
Unfortunately, activation email could not send to your email. Please try again.

Adding dynamic submenus to the customContextMenuItems

Thread ID:

Created:

Updated:

Platform:

Replies:

126328 Oct 7,2016 11:17 AM Oct 11,2016 08:22 AM JavaScript 1
loading
Tags: ejGrid
Carlos Rodríguez García
Asked On October 7, 2016 11:17 AM

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 [Syncfusion]
Replied On October 11, 2016 08:22 AM

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> 

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;