Selection
The Gantt enables the user to perform selection on rows and tasks.
Built-in Directive
To enable the built-in single-row selection, apply the kendoGanttSelectable directive to the Gantt.
The selected row can be programmatically controlled by providing a new selectedKeys array to the directive.
Currently, only single task selection is available out of the box. The article on custom selection showcases how to implement multiple selection.
Selection Key
By default, the SelectableDirective uses the Gantt taskModelFields.id field value of each task to persist its selection.
When no
taskModelFields.idis provided, the directive uses the fieldid.
In the following example, the Gantt is set to track its tasks by the field taskId, which is automatically picked up and used by the directive as well.
Using a Different Data Item Field
To use an item key different from the taskModelFields.id,
provide a string value to the directive itemKey property.
The following example demonstrates how the title field is used for selection persistence.
Using the Data Item as Key
The itemKey property also accepts a callback, that composes a custom key from each data item.
The following example demonstrates how the entire data item could also be used as an item key.
Custom Selection
The Gantt provides low-level hooks for implementing custom selection logic via the available isSelected callback.
In order for the Gantt to start executing the
isSelectedcallback for each row, set theselectableproperty of the component totrue.
The following example demonstrates how to achieve multiple selection by updating the selection state in the cellClick and taskClick event handlers.