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.
Syncfusion Feedback

Nested custom context menus

Thread ID:

Created:

Updated:

Platform:

Replies:

120870 Oct 23,2015 12:22 PM UTC Oct 27,2015 10:20 AM UTC JavaScript 3
loading
Tags: ejGrid
Roberto Tonni
Asked On October 23, 2015 12:22 PM UTC

Hi,
I would like to implement a nested custom context menus on my grids.

Below what I want to get:
  1. Disable the default items
  2. Define custom items (as well nested)
  3. Match an image to the items
  4. Intercept line affected
Points 1 and 4 should not be a problem. However, I could not find examples about custom nested items (maybe with item icon).

ejMenu lets you create nested context menus (using ul and li tags). Similarly, ejTreeGrid lets you create nested context menus (handling customMenuClick event), but I did not find examples about how to implement the same using ejGrid.

It is an ejTreeGrid unique feature or is there a way to implement it also for ejGrid?


Thanks,
Roberto

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 26, 2015 08:53 AM UTC

Hi Roberto,

Query1: I would like to implement a nested custom context menus on my grids.

We have already logged “Support to add submenus in context menu” as a usability feature. This feature will be implemented and included in our Volume 3 2015, Service Pack 2 release which is expected to be rolled out at the end of November 2015.

As of now, we have achieved your requirement using the below workaround. In the work around, we have used customContextMenuItems, which will helps to add customized menus in the list.  we have appended the submenu list to the context menu item in the DataBound event of the Grid.

<ul id="subMenu">

        <li class="e-list" role="menuitem"><a>OrderID</a></li>

        <li class="e-list" role="menuitem"><a>CustomerID</a></li>

        <li class="e-list" role="menuitem"><a>EmployeeID</a></li>

        <li class="e-list" role="menuitem"><a>ShipCountry</a></li>

    </ul>


$("#Grid").ejGrid({

                dataSource: window.dataSource,

                allowPaging: true,

                contextMenuSettings: {

                    enableContextMenu: true, customContextMenuItems: ["Refresh", "SubMenus"]

                },

                contextClick: "conClick", //helps to assign functionality to the custom menu

                dataBound: "dataBound",

                columns: [

                             { field: "OrderID", headerText: "Order ID", width: 90 },

                ]

            });


        });

        function conClick(args) {

            if (args.text == "Refresh")

                this.refreshContent(true);

        }

        function dataBound(args) {

            $("#Grid_Context").find(".e-customitem:eq(1)").append($("#subMenu"))
        }



Query2: Disable Default items and Match an image to the items

We can disable either disable all the default items using contextMenuItems. In the contextMenuSettings, if we assign the contextMenuItems as an empty array, it will hide all the default context menus. Please refer to the below code example.

$("#Grid").ejGrid({

                dataSource: window.dataSource,

                allowPaging: true,

                contextMenuSettings: {

                    enableContextMenu: true, contextMenuItems: [], customContextMenuItems: ["<img src='/Content/undo.jpg' style='width:20px;height:20px' />Refresh"]

                },

                contextClick: "conClick",

                dataBound: "dataBound",

                columns: [

                             { field: "OrderID", headerText: "Order ID", width: 90 },

                ]

            });


        });

        function conClick(args) {

            if (args.text == "Refresh")

                this.refreshContent(true);
        }


The above code example also explained to render an image in the context menu list.

Query: Intercept line affected

Could you please elaborate this requirement? Would you like to place some lines in-between the list?

With the above requirements we have prepared a sample that can be referred in the below link.

http://jsplayground.syncfusion.com/ifkvlne4

Refer to the Help Document for other events of Essential Grid, http://help.syncfusion.com/js/api/ejgrid#events.

Regards,
Seeni Sakthi Kumar S.

Roberto Tonni
Replied On October 26, 2015 09:57 AM UTC

Thanks a lot, I will await the Volume 3 2015 SP2 release, in the meantime I will start to use the workaround.

I wanted to ask if the new usability features will be implemented in a similar way to ejTreeGrid (an contextMenuOpen event in which dynamically add items and sub-items).
This would be very helpful for me because in many cases the context menu items depend on the selected row.

Regarding "Intercept line affected", my only requirement is to be able to retrieve the information line on which you have enabled the context menu, but I can already do it using contextClick event and its arguments (eg. args.model.currentViewData [rowIndex]).


Regards,
Roberto

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 27, 2015 10:20 AM UTC

Hi Roberto,

We have created a new support incident for the usability feature “Support to add submenus in context menu” under your account to track the status of this feature. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Query #1: Regarding "Intercept line affected"

You can also get the clicked record’s data from in the contextOpen. Please refer to the code example and output.

$("#Grid").ejGrid({

                dataSource: window.dataSource,

                allowPaging: true,

                contextMenuSettings: { enableContextMenu: true },

                contextOpen: "Open",

                columns: [

                             { field: "OrderID", headerText: "Order ID"},

                             . . . .

                ]

            });


        });

        function Open(args) {

            var data = args.model.currentViewData[$(args.target).closest("tr").index()];
        }




Query #2: I wanted to ask if the new usability features will be implemented in a similar way to ejTreeGrid (an contextMenuOpen event in which dynamically add items and sub-items).

We can add items of the contextMenu dynamically. Please refer to the below code example.

<div id="Grid"></div>

    <ul id="subMenu">

        <li class="e-list" role="menuitem"><a>OrderID</a></li>

    </ul>

    <script type="text/javascript">

        $(function () {


            $("#Grid").ejGrid({

                dataSource: window.dataSource,

                allowPaging: true,

                contextMenuSettings: { enableContextMenu: true },

                contextOpen: "Open",

                columns: [

                             { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },

                             . . . .

                ]

            });


        });

        function Open(args) {

            $("#Grid_Context").append($("#subMenu li")) //Here Grid is id of the Grid Element <div id="Grid"></div>
        }




Regards,
Seeni Sakthi Kumar S.

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.

Warning Icon 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.Close Icon

;