Example of Context Menu in ASP.NET Core Gantt Control

This sample demonstrates the various phases involved in constructing a residential house, from testing the soil to handing over the fully constructed property to the owner. This also demonstrates the usage of default and custom context menu in Gantt control.

DEMO

SOURCE

Gantt has an option to show the context menu while performing right click on it. You can configure the default and custom menu items in the context menu using the contextMenuItems property. Each menu item will be displayed contextually based on its target. In this demo, we have rendered the following default and custom menu items

Default items:

AutoFitAll - Auto fit all columns.
AutoFit - Auto fit the current column.
TaskInformation - Edit the current record.
Indent - Indent the selected record to one level.
Outdent - Outdent the selected record to one level.
DeleteTask - Delete the current record.
Save - Save the edited record.
Cancel - Cancel the edited state.
SortAscending - Sort the current column in ascending order.
SortDescending - Sort the current column in descending order.
DeleteDependency - Delete the dependency of the current record.
Convert - Convert the normal task into milestone task and vice versa.
Add
- Above - Add a new row above the selected row.
- Below - Add a new row below the selected row.
- Child - Add a new row as child to the selected row.
- Milestone - Add a milestone task below to selected row.

Custom items:

In this demo, custom menu items have been enabled in the context menu to perform expanding and collapsing the parent rows,

Expand the Row - Used to expand the parent row, and it will render where the row is in a collapsed state.
Collapse the Row - Used to collapse the parent row, and it will render where the row is in a expanded state.