Articles in this section
Category / Section

How to render custom context menu in ASP.NET MVC TreeGrid?

3 mins read

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:

[cshtml]
 
@(Html.EJ().TreeGrid("TreeGridContainer")      
//…    
          .ClientSideEvents(cv => cv.ContextMenuOpen("contextMenuOpen"))          
          .ContextMenuSettings(cms => cms.ShowContextMenu(true)
          .ContextMenuItems(new List<TreeGridContextMenuItems>() {
              TreeGridContextMenuItems.Add,
              TreeGridContextMenuItems.Edit,
              TreeGridContextMenuItems.Delete
          }))
    )@(Html.EJ().ScriptManager())
    <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);
        }
    </script>

The below screenshots shows the output of above code snippets.

TreeGrid context menu

 

Sample

Please find our online demo sample for further reference

Sample

 

 

 

 

Conclusion

I hope you enjoyed learning about how to render custom context menu in ASP.NET MVC TreeGrid.

You can refer to .NET MVC TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MVC TreeGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied