This sample demonstrates dialog editing in the Gantt Chart using a software development project workflow. The add and edit dialogs are customized with dedicated tabs for task details, dependencies, resources, segments, and advanced scheduling options.
This sample demonstrates how to fully customize the dialog editing interface in the Gantt Chart using the addDialogFields and editDialogFields properties along with additionalParams. It showcases how to override default input and grid components within each tab and organize custom fields across multiple tabs for a structured editing experience. The following tab-level customizations are included: Dependency Tab - Includes additional toolbar items and improved task naming to simplify task relationship management. Resource Tab - Combines resource images and names, introduces a role column, and supports column menu options for flexible configuration. Segments Tab - Enhanced with extra toolbar options for efficient segment editing and control. Advanced Tab - Organizes work and Task mode input fields for quick access and improved clarity. Injecting Module: Gantt component features are segregated into individual feature-wise modules. To use edit, selection, markers, column menu, toolbar, filter, reorder, sort, resize features, inject the Edit, Selection, DayMarkers, ColumnMenu, Toolbar, Filter, Reorder, Sort, Resize modules using the Gantt.Inject(Edit), Gantt.Inject(Selection), Gantt.Inject(DayMarkers), Gantt.Inject(ColumnMenu), Gantt.Inject(Toolbar), Gantt.Inject(Filter), Gantt.Inject(Reorder), Gantt.Inject(Sort), Gantt.Inject(Resize) methods. More information on the Essential® JS2 Gantt Chart can be found in this editing tasks documentation section. Looking for the full JavaScript Gantt Chart component overview, features, pricing, and documentation? Visit the JavaScript Gantt Chart page.