New to Kendo UI for Angular? Start a free 30-day trial

In-Cell Editing

The Gantt provides an option for editing individual cells in the TreeList pane.

Basic Concepts

The in-cell edit mode allows users to edit the value of each cell. Each time a cell is clicked or double-clicked, the respective event is emitted, and allows you to call a method that will open the cell in edit mode.

To implement in-cell editing use the following methods and events:

When the end user clicks a TreeList cell, this triggers the cellClick event.
The TaskClickEvent data includes the data item, associated with the clicked cell, the GanttComponent instance, and the original click event data.
To put a cell in edit mode, call the Gantt editCell method

and pass the data item, column identifier, and a FormGroup instance containing the respective editable fields.

Handle the cellClose event handler to process the Gantt data accordingly. The CellCloseEvent data contains the GanttComponent

instance, the TaskEditItem, and all properties of the TreeList CellCloseEvent. The event is preventable.

All tasks should have valid start and end dates where the end date is after the start date.

The following example demonstrates how to set up the in-cell editing mode of the Kendo UI Gantt for Angular using Reactive Forms.

Change Theme

Theme

Loading ...

Editing on Double Click

To put a cell in edit mode when the user double-clicks it, replace the cellClick event with cellDblClick in Step 1 from the Basic Concepts instructions.

The following example demonstrates how to open the double-clicked cell for editing.