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 CRUD operations in a Gantt Chart. You can perform CRUD operations as follows:
Add - To add a new task, click the Add toolbar buttonEdit - To edit a task, double-click a row or double click a taskbar, or click the toolbar Edit button after selecting a rowIndent - To indent a task, click the toolbar Indent button after selecting a rowOutdent - To outdent a task, click the toolbar Outdent button after selecting a rowDelete - To delete a task, click the toolbar Delete button after selecting a rowUpdate,Cancel - You can save or discard changes by clicking the toolbar Update and Cancel buttons respectively
CRUD operations can be configured in Gantt Chart using allowTaskbarEditing in editSettings. Gantt Chart has two modes to manipulate the datasource:
AutoDialogIn this demo, Auto mode is enabled for editing. On the TreeGrid side, you can start editing any row by double clicking on it or clicking on toolbar’s Edit button, then the currently selected row will be changed to edited state.
On the chart side, you can edit the tasks using edit dialog by double clicking on the taskbars and you can edit the dependency connector lines using drag and drop action with connector line points available on the either side of taskbar.
In this sample column.validation has been enabled for the columns.It uses the Form Validator control and the column validation property to define validation rules, displaying error messages for invalid fields.
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 documentation section.