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” property.
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.
[aspx]
<ej:TreeGrid runat="server" ID="Container" ContextMenuOpen="contextMenuOpen">
//…
<ContextMenuSettings ShowContextMenu="true"
ContextMenuItems="add,edit,delete" />
</ej:TreeGrid>
<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 link
Please find our online demo sample for further reference
