This sample demonstrates task editing and CRUD operations in the Gantt Chart using a residential construction project workflow. You can add, edit, delete, indent, outdent, and update tasks using the toolbar or direct user interactions.
The Gantt Chart supports built-in CRUD operations through the editSettings property. In this example, adding, editing, deleting, and taskbar editing are enabled, allowing tasks to be modified directly from both the TreeGrid and chart areas.
Add - Creates a new taskEdit - Modifies the selected task.Indent - Makes the selected task a child task.Outdent - Promotes the selected task to a higher level.Delete - Removes the selected task.Update / Cancel - Saves or discards the current changes.Tasks can be edited by double-clicking a row, using the toolbar commands, or opening the edit dialog. Taskbars can also be modified through drag-and-drop interactions, including updating task dates, durations, progress, and dependency relationships. This sample demonstrates resource assignment, dependency editing, notes editing, and support for custom duration units through the taskFields.durationUnit mapping such as week, month, days, hours and minutes.
Gantt component features are segregated into individual feature-wise modules. To use edit, toolbar, markers and selection features, we need to inject Edit, Toolbar, DayMarkers and Selection into the Inject Services section.
More information on the Essential® React Gantt Chart can be found in this editing tasks documentation section.
Looking for the full React Gantt Chart component overview, features, pricing, and documentation? Visit the React Gantt Chart page.