Example of Editing in Javascript Gantt Chart Control

All Controls
/
Gantt Chart
/
Editing

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 new task, click Add toolbar button
  • Edit - To edit a task, double click a row or double click a taskbar or click toolbar Edit button after selected a row
  • Indent - To indent a task, click toolbar indent button after selecting a row
  • Outdent - To outdent a task, click toolbar outdent button after selecting a row
  • Delete - To delete a task, click toolbar Delete button after selected a row
  • Update,Cancel - You can save or discard changes by click toolbar Update and Cancel button respectively

    • More Details...

    Description

    This CRUD operations can be configured in Gantt chart using editSettings and allowTaskbarEditing. Gantt chart has two modes to manipulate the datasource Auto Dialog In 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. It is possible to connect parent-parent, child-child, child-parent and parent-child dependency relationships. 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. Injecting Module: Gantt control features are segregated into individual feature-wise modules. To use editing feature, inject the Edit module using the Gantt.Inject(Edit) method. To use a selection, inject the Selection module using the Gantt.Inject(Selection) method, and use a sort by injecting the Sort module using the Gantt.Inject(Sort) method. To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method.