Row Editing

The JavaScript Gantt Chart component supports editing the row header cells inplace using inline editing mode.

This feature can be enabled using the rowClickHandling property:

rowClickHandling: "Edit"

When inline editing is enabled, the users can click the row header cells and update the text. After the new text is confirmed using the <enter> key, the Gantt Chart fires the onRowEdit event handler with the actions details and updates the task properties.

Live Demo

• JavaScript Gantt Chart: Inline Row Editing Demo

Example

{
    rowClickHandling: "Edit",
    onRowEdit: args => {
        console.log("Row edited", args.task, args.x, args.newText);
    },
    // ...
}