Indent and outdent in JavaScript Gantt Chart Control
18 Nov 20181 minute to read
The JavaScript Gantt Chart control provides built-in support for indenting and outdenting rows, allowing hierarchy levels to be adjusted within the Gantt chart.
- Indent – Moves a selected row one level deeper, making it the last child of its previous row.
- Outdent – Shifts a row one level up, placing it as a sibling to its parent.
To enable indent and outdent functionality, set editSettings.allowEditing to true, inject Edit and Selection module of the control, and use either the built-in context menu or toolbaritems to perform indent and outdent actions.
The following sample demonstrates how to enable indent and outdent functionalities in the Gantt using the toolbar property.
Indent and outdent a row programmatically
You can programmatically adjust a row’s hierarchy in the JavaScript Gantt Chart control using the indent and outdent methods. Before performing these actions, select the target row by calling the selectRow method with the appropriate row index.
The following sample demonstrates how to programmatically select row index 2 and perform indent or outdent actions using an external button click.
Retrieve Indent and outdent details
You can retrieve indent and outdent details using the actionComplete event, where the args.requestType value will be either indented or outdented, indicating the type of action performed.
Limitation
- The indent and outdent feature does not support selecting and modifying multiple rows simultaneously.