Context Menu

13 Jun 20235 minutes to read

Context menu in Gantt has the following default menu items.

Task Details
Add New Task
Indent
Outdent
Delete

Context menu in Gantt can be enabled by using EnableContextMenu property.
The following code example explains how to enable the context menu in Gantt control.

CSHTML

@(Html.EJ().Gantt("Gantt")
    //.
    .EnableContextMenu(true)
    )
@(Html.EJ().ScriptManager())

The following screenshot shows the default context menu in Gantt control.

It is possible to add a custom context menu item in Gantt control by using ContextMenuOpen event. The following code example explains on how to add the custom context menu item.

CSHTML

@(Html.EJ().Gantt("Gantt")
    //..
    .EnableContextMenu(true)
    .ClientSideEvents(eve=>
        {
            eve.ContextMenuOpen("contextMenuOpen");
        })
    )
@(Html.EJ().ScriptManager()) 
<script type="text/javascript">
     function contextMenuOpen(args) {
            args.contextMenuItems.push({
                headerText: "Expand/Collapse",
                menuId: "expand",
                iconPath: "url(Expand-02-WF.png)",
                eventHandler: function () {
                    //event handler for custom menu items
                }
            })
        }
</script>

The screenshot of the custom context menu items in Gantt control is as follows.

It is possible to create a custom menu item with a sub menu, by mapping the parentMenuId property from the contextMenuItems argument in the ContextMenuOpen event.

The following code example explains on how to add sub context menu for custom menu items.

CSHTML

@(Html.EJ().Gantt("Gantt")
    //..
    .EnableContextMenu(true)
    .ClientSideEvents(eve=>
            {
                    eve.ContextMenuOpen("contextMenuOpen");
            })
    )
@(Html.EJ().ScriptManager()) 
 <script type="text/javascript">
           args.contextMenuItems.push({
                headerText: "Expand/Collapse",
                menuId: "expand",
                iconPath: "url(Navigation-Up-02-WF.png)",
                eventHandler: function () {
                    //event handler for custom menu items
                }
            });

            args.contextMenuItems.push({
                headerText: "ExpandAll",
                menuId: "expandAll",
                parentMenuId: "expand",
                iconPath: "url(Expand-02-WF.png)",
                eventHandler: function () {
                    //event handler for custom menu items
                }
            });

            args.contextMenuItems.push({
                headerText: "CollapseAll",
                menuId: "collapseAll",
                parentMenuId: "expand",
                iconPath: "url(shrink2.png)",
                eventHandler: function () {
                    //event handler for custom menu items
                }
            });
	}
</script>

The screenshot of the custom context menu items in Gantt control is as follows.

Click here to view the online demo sample for custom context menu in Gantt.

Default Menu Items

Custom Menu Item

Custom menu item with sub menu item