How to include custom menu item in ASP.NET MVC TreeGrid?
It is possible to include a custom menu item in ASP.NET MVC 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.
Sample
Please find our online demo sample for further reference
Conclusion
I hope you enjoyed learning about how to include custom menu items in ASP.NET MVC TreeGrid.
You can refer to our ASP.NET MVC Tree Grid 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 ASP.NET MVC Tree Grid 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
