)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to add custom context menu items in TreeGrid

Platform: jQuery |
Control: ejTreeGrid |
Published Date: July 29, 2016 |
Last Revised Date: May 29, 2019

It is possible to include a custom menu item in TreeGrid context menu by using contextMenuOpen client side event. And this event will be triggered only on enabling the context menu using contextMenuSettings.showContextMenu.

The below properties are used to include a custom menu item,

headerText - Text to be displayed for the custom menu item

menuId - Provides ID field for the created DOM element for custom menu item

iconPath - Image location for menu item

eventHandler - Event for binding actions to the custom menu item click

iconClass - CSS class for menu item’s icon

parentMenuId - Parent menu ID for displaying the custom menu item as sub item

disable - To enable/disable the custom menu item

The below code example explains about how to include custom menu item in TreeGrid:

<div id="TreeGridContainer" style="height:400px;width:100%"></div>   
<script type="text/javascript">
$(function () {
            $("#TreeGridContainer").ejTreeGrid({
                //...
                dataSource: projectData,
                contextMenuSettings: {
                    showContextMenu: true,
                    contextMenuItems: ["add", "edit", "delete"]
                },
                contextMenuOpen: contextMenuOpen,
          })
        }); 
function contextMenuOpen(args) {
            //To add the custom context menu item in Treegrid
            var isExpandable = true, isCollapsable = true, data;
            data = args.item;
            if (data && data.hasChildRecords) {
                if (data.expanded)
                    isExpandable = false;
                else
                    isCollapsable = false;
            } else {
                isExpandable = false;
                isCollapsable = false;
            }
            var aboveMenu = args.contextMenuItems.filter(function (val) { return val.menuId == "Above" }),
              belowMenu = args.contextMenuItems.filter(function (val) { return val.menuId == "Below" });
            aboveMenu[0].iconClass = "e-aboveIcon";
            belowMenu[0].iconClass = "e-belowIcon";
            //To add the customized menu items in context menu
            var contextMenuItems = [{
                headerText: "Top",
                eventHandler: customMenuAddHandler,
                menuId: "Top",
                parentMenuId: "Add",
                iconClass: "e-topIcon"
 
            }, {
                headerText: "Bottom",
                menuId: "Bottom",
                parentMenuId: "Add",
                eventHandler: customMenuAddHandler,
                iconClass: "e-bottomIcon"
            },
            {
                headerText: "Child",
                menuId: "Child",
                parentMenuId: "Add",
                eventHandler: customMenuAddHandler,
                iconClass: "e-childIcon"
            },
             {
                 headerText: "Expand",
                 menuId: "Expand",
                 eventHandler: customMenuExpandCollapseHandler,
                 iconClass: "e-expandIcon",
                 disable: !isExpandable
             },
    {
                 headerText: "Collapse",
                 menuId: "Collapse",
                 eventHandler: customMenuExpandCollapseHandler,
                 iconClass: "e-collapseIcon",
                 disable: !isCollapsable
             }
            ];
           args.contextMenuItems.push.apply(args.contextMenuItems, contextMenuItems);
        }
        function customMenuAddHandler(args) {
            //To bind the action to the custom context menu items
            var currentMenuId = args.menuId,
                tempData = args.data && $.extend({}, args.data.item), rowPosition;
            if (currentMenuId == "Top") {
                rowPosition = ej.TreeGrid.RowPosition.Top;
            }
            else if (currentMenuId == "Bottom") {
                rowPosition = ej.TreeGrid.RowPosition.Bottom;
            }
            else if (currentMenuId == "Child") {
                rowPosition = ej.TreeGrid.RowPosition.Child;
            }
            this.addRow(tempData, rowPosition);
        }
        function customMenuExpandCollapseHandler(args) {
            var currentMenuId = args.menuId, expandCollapseArgs = {};
            expandCollapseArgs.data = args.data;
            if (currentMenuId === "Expand")
                expandCollapseArgs.expanded = true;
            else
                expandCollapseArgs.expanded = false;
            ej.TreeGrid.sendExpandCollapseRequest(this, expandCollapseArgs);
        }
</script>

 

Render custom context menu items in tree grid.

A sample to render the custom context menu items in TreeGrid is available in the following link,

Sample

 

 

 

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment
Comments
Charles Dan
Nov 19, 2016

You’ve written nice post, I am gonna bookmark this page, thanks for info. mp3 juices I actually appreciate your own position and I will be sure to come back here. 

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon