1. Home
  2. Forum
  3. jQuery
  4. Context menu

Context menu

Hi,

Is there a way to add a custom context menu item to an ejGrid in javascript.

I have pushed and object { id: 'objid', text: 'menu item text' } and a string "menu item text" on document ready.
The menu item doesn't show up.

I have after that tried with gridObj.refreshContent/Template/Toolbar without success also.

I can see on the chrome developer tools console that the pushed object is in gridObj.model.contextMenuSettings.customContextMenuItems

What I need is to be able to render a different menu per user role.

Thanks,
Regards,
Raouf



7 Replies
MS Mani Sankar Durai Syncfusion Team July 28, 2017 12:24 PM UTC

Hi Raouf, 

Thanks for contacting Syncfusion support 

We have analyzed your query and we suspect that you would like to set different custom context menu items for different columns. Based on your query we have prepared a sample that can be available from the below link. 
In this sample we have rendered all the custom context menu items initially when opening the context menu we have shown which is required for the corresponding column instead of showing all. We have achieved this requirement using contextOpen event in grid.  
Refer the code example 
<script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
... 
                 contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'id', text: "Description" }, { id: 'Text', text: "Edit Item" }], subContextMenu: [{ contextMenuItem: "Text", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] }, 
                columns: [ 
                            ... 
                ], 
                contextOpen: function (args) { 
                    var context = this._conmenu.element; 
                    context.find(".e-customitem a").css('display', 'none');//invisible all custom contextmenu  
                    if (args.headerText == "Employee ID" || args.headerText == "OrderID")  
                        $(context.find(".e-customitem:contains('Description') a")).css("display", "block"); 
                     else 
                        $(context.find(".e-customitem:contains('Edit Item') a")).css("display", "block"); 
                     
                } 
            }); 
        }); 
    </script> 

Note: This is the recommended way to show the custom context menu dynamically instead of pushing. 
Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 




RB Raouf Ben Hassine July 28, 2017 02:40 PM UTC

Hi,

Thank you for your answer.

The use case you solved isn't the one I asked about.

It is an interesting solution though. I will be keeping it aside in case I need it at a later time.

About my question, the solution is quite simple it turns out.

The use case is the following:

  • Have the same context menu items for all columns of the grid.
  • The context menu items may change per user identity.
  • The context menu items may change for the same user across page loads.
This can be done by initializing an array in JavaScript an passing it to the grid init func. This supposes I will be hard-coding the items of the menu

I asked the question because at a later time I will be making the items change eve for the same user and I would like to make it in a way that doesn't require page reload (going back to the server).

Regards,

Raouf


MS Mani Sankar Durai Syncfusion Team July 31, 2017 12:54 PM UTC

Hi Raouf, 

We have analyzed your query and we have prepared a sample based on your requirement that can be available from the below link. 
In this sample we have shown or hide the context menu based on Employee Value.  i.e when the EmployeeID value is less than 5 we have shown the “Description” context menu item in grid and when it is greater we  have shown “Edit item” in grid. 
Now after clicking the button the above process will interchange. i.e when the Employee value is greater than 6 it will show “Description” item and when it less than it will show “Edit item” in context menu. 
Refer the code example 
<body> 
    <button id="btn" onclick="myFunc()">Click to change the user identity</button> 
    <div id="Grid"></div> 
 
    <script type="text/javascript"> 
        var flag; 
        $(function () { 
            $("#Grid").ejGrid({ 
          ... 
                contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'id', text: "Description" }, { id: 'Text', text: "Edit Item" }], subContextMenu: [{ contextMenuItem: "Text", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] }, 
                columns: [ 
                          ... 
                ], 
                contextOpen: function (args) { 
                    var context = this._conmenu.element; 
                    context.find(".e-customitem a").css('display', 'none');//invisible all custom contextmenu 
                    if (ej.isNullOrUndefined(flag)) {   //process will takes place initially 
                        if (args.rowData[0].EmployeeID <= 5) //visible only if the element has e-rowcell 
                            $(context.find(".e-customitem:contains('Description') a")).css("display", "block"); 
                        else 
                            $(context.find(".e-customitem:contains('Edit Item') a")).css("display", "block"); 
                    } 
                    if (!ej.isNullOrUndefined(flag)) {   //procees will takes place after clicking button. 
                        if (args.rowData[0].EmployeeID > flag) 
                            $(context.find(".e-customitem:contains('Description') a")).css("display", "block"); 
                        else 
                            $(context.find(".e-customitem:contains('Edit Item') a")).css("display", "block"); 
                    } 
                } 
            }); 
        }); 
    </script> 
    <script> 
        function myFunc() { 
            flag = 6 
        } 
    </script> 
</body> 
</html> 
 

Thus the context menu will be shown based on the user value. 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


RB Raouf Ben Hassine August 1, 2017 01:51 PM UTC

Hi Manisankar Durai,

Again, thank you for your answer. But, It doesn't exactly solve my problem for the following two reasons :

  1. I don't know all the possible options during grid init,
  2. I don't know which options are relative to which user identity during grid init
An optimal solution would be to load the menu options at context open. Is that doable?

Regards,

Raouf


MS Mani Sankar Durai Syncfusion Team August 2, 2017 12:46 PM UTC

Hi Raouf, 

We have checked your query and we suspect that you like to add the item in context menu since at the initial time you have not aware about the possible menu items. So to add the menu item manually when opening the context menu based on user identity we suggest you to use beforeOpen event in context menu and to add use insert method in context menu. This beforeOpen of context menu has been handled inside the create event of grid. 
Refer the code example 
<div id="Grid"></div> 
    <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
... 
                contextMenuSettings: { enableContextMenu: true, contextMenuItems: [], customContextMenuItems: [{ id: 'id', text: "Description" }, { id: 'Text', text: "Edit Item" }], subContextMenu: [{ contextMenuItem: "Text", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] }, 
                columns: [ 
                            ... 
                ], 
                create: function (args) { 
                    var obj = $("#Grid_Context").ejMenu("instance"); 
                    obj.model.beforeOpen = "beforeopen";         // use beforeopen event to add the item before context menu renders 
                }, 
            }); 
        }); 
    </script> 
    <script> 
        function beforeopen(args) { 
          if (parseInt(args.target.textContent) < 5) { 
                $("#Grid_Context").find("#More").remove(); 
               if (this.element.find(".e-list:contains('More')").length == 0) 
                this.insert([{ id: "More", text: "More" }], "#Grid_Context"); //use insert method to add the item in context menu 
          } 
            else 
                this.element.find(".e-list:contains('More')").css("display", "none"); 
        } 
    </script> 

We have also prepared a sample that can be downloaded from the below link. 

Refer the documentation link. 


Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


RB Raouf Ben Hassine August 3, 2017 12:31 PM UTC

Hi Manisankar Durai,

That's about it.

Thank you for your help.

Regards,

Raouf Ben Hassine




MS Mani Sankar Durai Syncfusion Team August 4, 2017 06:19 AM UTC

Hi Raouf, 

We are happy to hear that your problem has been solved.  
Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Up arrow icon