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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Selection Key

By default, the SelectableDirective uses the Gantt taskModelFields.id field value of each task to persist its selection.

When no taskModelFields.id is provided, the directive uses the field id.

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 isSelected callback for each row, set the selectable property of the component to true.

The following example demonstrates how to achieve multiple selection by updating the selection state in the cellClick and taskClick event handlers.

Example
View Source
Edit In Stackblitz  
Change Theme: