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 component.
The Gantt Chart provides a context menu that offers quick access to commonly used operations. Context menu support can be enabled by setting the contextMenuItems property to true. Built-in context menu items are available for operations such as task editing, row addition and deletion, sorting, indentation, dependency management, and column auto-fitting. The displayed menu items are automatically adjusted based on the selected target element. When allowUnscheduledTasks is enabled, tasks without StartDate, EndDate, or Duration are rendered without a taskbar. Enabling the allowTaskbarDraw property allows these tasks to be scheduled by drawing a taskbar directly in the chart area, which automatically updates the task's scheduling values 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 in to 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 This sample also demonstrates how to add custom context menu items using the contextMenuItems property. Expand the Row - Used to expand the parent row when it is in a collapsed state. Collapse the Row - Used to collapse the parent row when it is in an expanded state. Custom items: In this demo, custom menu items have been enabled in the context menu to perform expanding and collapsed the parent rows: Expand the Row - Used to expand the parent row when it is in a collapsed state. Collapse the Row - Used to collapse the parent row and it will render when it is in an expanded state. Injecting Module: Gantt component features are segregated into individual feature-wise modules. To use context menu, edit, selection, toolbar, markers, resize, sort features, inject the ContextMenu, Edit, Selection, Toolbar, DayMarkers, Resize, Sort modules using the Gantt.Inject(ContextMenu), Gantt.Inject(Edit), Gantt.Inject(Selection), Gantt.Inject(Toolbar), Gantt.Inject(DayMarkers), Gantt.Inject(Resize), Gantt.Inject(Sort) methods. More information on the Essential® JS2 Gantt Chart can be found in this context menu documentation section. Looking for the full JavaScript Gantt Chart component overview, features, pricing, and documentation? Visit the JavaScript Gantt Chart page.