How to create a custom menu item in Gantt chart context menu
To include a custom menu item in the TreeGrid context menu, use the context-menu-open event. This event will be triggered on enabling the context menu using the enable-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 Gantt chart.
[cshtml]
<ej-gantt id="ganttSample" datasource="ViewBag.datasource"
enable-context-menu="true"
context-menu-open="contextMenuOpen"
allow-gantt-chart-editing="true">
<e-gantt-edit-settings allow-adding="true" allow-deleting="true" allow-editing="true" edit-mode="cellEditing" allow-indent="true" />
</ej-gantt>
<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) {
this.expandCollapseRecord(args.data.taskId);
}
</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.
