Example of Context Menu in Javascript Gantt Chart Control

Context Menu

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.

More Details...


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 following default and custom menu items Default items: AutoFitAll - Auto fit all columns. AutoFit - Auto fit the current column. TaskInformation - Edit the current record. DeleteTask - Delete the current record. Indent - Indent the selected record to one level Outdent - Outdent the selected record to one level 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. To use context menu feature, we need to inject ContextMenu module using the Gantt.Inject(ContextMenu) method.