# 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`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/selectabledirective) directive to the Gantt.
The selected row can be programmatically controlled by providing a new [`selectedKeys`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/selectabledirective#selectedkeys) array to the directive.

> Currently, only single task selection is available out of the box. The article on [custom selection](https://www.telerik.com/kendo-angular-ui/components/gantt/selection#custom-selection) showcases how to implement multiple selection.

The following example demonstrates how to enable single-row selection in the Gantt using the `kendoGanttSelectable` directive and two-way binding on `selectedKeys` to track and control the selected row.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/gantt/selection/directive/source.txt)

### Selection Key

By default, the [`SelectableDirective`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/selectabledirective) uses the Gantt [`taskModelFields.id`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#taskmodelfields) field value of each task to persist its selection.

> When no [`taskModelFields.id`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#taskmodelfields) 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/gantt/selection/id-field/source.txt)

### Using a Different Data Item Field

To use an item key different from the [`taskModelFields.id`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#taskmodelfields),
provide a string value to the directive [`itemKey`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/selectabledirective#itemkey) property.

The following example demonstrates how the `title` field is used for selection persistence.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/gantt/selection/custom-item-key/source.txt)

### Using the Data Item as Key

The [`itemKey`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/selectabledirective#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/gantt/selection/data-item-key/source.txt)

## Custom Selection

The Gantt provides low-level hooks for implementing custom selection logic via the available [`isSelected`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#isselected) callback.

> In order for the Gantt to start executing the [`isSelected`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#isselected) callback for each row, set the [`selectable`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#selectable) property of the component to `true`.

The following example demonstrates how to achieve multiple selection by updating the selection state in the [`cellClick`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#cellclick) and [`taskClick`](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent#taskclick) event handlers.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/gantt/selection/callback/source.txt)

## Suggested Links

* [API Reference of the SelectableDirective](https://www.telerik.com/kendo-angular-ui/components/gantt/api/selectabledirective)
* [API Reference of the GanttComponent](https://www.telerik.com/kendo-angular-ui/components/gantt/api/ganttcomponent)
* [API Index of the Gantt](https://www.telerik.com/kendo-angular-ui/components/gantt/api)