How to create a custom menu item in ASP.NET Core Tree grid?
To include a custom menu item in the TreeGrid context menu, use the context-menu-open client-side event. This event will be triggered on enabling the ASP.NET Core TreeGrid context menu using the e-tree-grid-context-menu-settings. show-context-menu property.
The following properties are used to include a custom menu item:
headerText: Text to be displayed for the custom menu item.
menuId: Provides an ID field for the created DOM element for the custom menu item.
iconPath: Image location for the menu item.
eventHandler: Event handler for menu item click action.
iconClass: CSS class for menu item’s icon.
parentMenuId: Displays the custom menu item as subitem.
disable: Enables or disables the custom menu item.
The following code example explains how to include the custom menu item in the TreeGrid.
[cshtml]
<ej-tree-grid id="TreeGridContainer" datasource="ViewBag.datasource" child-mapping="Children" tree-column-index="1" is-responsive="true" context-menu-open="contextMenuOpen">
<e-tree-grid-context-menu-settings show-context-menu="true" context-menu-items="ViewBag.contextMenuItems"></e-tree-grid-context-menu-settings>
<e-tree-grid-edit-settings allow-deleting="true" allow-adding="true" allow-editing="true" row-position="AboveSelectedRow" edit-mode="CellEditing" />
</ej-tree-grid>
<script type="text/javascript">
function contextMenuOpen(args) {
var isExpandable = true, data;
data = args.item;
if (data && data.hasChildRecords) {
if (data.expanded)
isExpandable = false;
} else {
isExpandable = false;
}
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 following screenshot shows the output of custom menu items “Expand” and “Collapse” to expand and collapse the parent rows using context menu click action.
A sample to explain the above scenario is available here.
Conclusion
I hope you enjoyed learning about how to create a custom menu item in ASP.NET Core Tree grid.
You can refer to our ASP.NET Core 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 Core 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!
