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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render custom context menu in TreeGrid?

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 - Client side event for 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:

          .ClientSideEvents(cv => cv.ContextMenuOpen("contextMenuOpen"))          
          .ContextMenuSettings(cms => cms.ShowContextMenu(true)
          .ContextMenuItems(new List<TreeGridContextMenuItems>() {
    <script type="text/javascript">
        function contextMenuOpen(args) {
            var isExpandable = false, data;
            data = args.item;
            if (data && data.hasChildRecords && !data.expanded) {
                isExpandable = true;
            if (data) {
                var contextMenuItems = [{
                    headerText: "Expand",
                    menuId: "Expand",
                    eventHandler: customMenuExpandCollapseHandler,
                    iconClass: "e-expandIcon",
                    disable: !isExpandable
                args.contextMenuItems.push.apply(args.contextMenuItems, contextMenuItems);
        function customMenuExpandCollapseHandler(args) {
            var currentMenuId = args.menuId, expandCollapseArgs = {};
            expandCollapseArgs.data = args.data;
            if (currentMenuId === "Expand")
                expandCollapseArgs.expanded = true;
            ej.TreeGrid.sendExpandCollapseRequest(this, expandCollapseArgs);

The below screenshots shows the output of above code snippets.

TreeGrid context menu



Please find our online demo sample for further reference









2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
You must log in to leave a comment

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