Nested custom context menus

[Roberto Tonni]

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]

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]

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]

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.