# Angular TreeView Selection

The TreeView enables the user to select single or multiple nodes and persist the selection state.

To enable the selection, apply the built-in [`SelectDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective) directive to the TreeView.

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

The directive expose the [`kendoTreeViewSelectable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective#kendotreeviewselectable) property, which enables you to control the built-in selection behavior, and both `boolean` and [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectablesettings) parameters.

If you use a `SelectableSettings` parameter, the TreeView enables you to specify the following options:

* `enabled`—Determines if the selection is initially enabled. The default value is `true`.
* `mode`—Sets the [`SelectionMode`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectionmode) of the selection. The default value is `single`.

## Persisting Single Selection

By default, the [`SelectDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective) enables single selection mode, allowing only one item to be selected at a time. This approach provides you with full control over persisting the selection functionality—for example, it allows you to specify initially selected items and manually update the collection.

### Using Hierarchical Index

By default, the `SelectDirective` persists the selected items by their hierarchical index. To display an initially selected TreeView item, use the [`selectedKeys`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective#selectedkeys) property and pass the hierarchical index of the desired item.

The following example demonstrates how to pre-select a specific node by passing its hierarchical index to the `selectedKeys` property.

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

### Using DataItem Field

To persist the selection by a specific item field—for example, the `text` field—use the [`selectBy`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective#selectby) property and set it to the field name. This approach is useful when you need to maintain selection across data operations such as filtering or sorting, as the hierarchical index may change but the unique field remains constant.

The following example demonstrates how to select a TreeView item by the `text` field.

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

## Persisting Multiple Selection

To enable the multiple selection mode, set the [`kendoTreeViewSelectable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectablesettings) property to a `SelectableSettings` object with the `mode` field set to `multiple`.

### Using Hierarchical Index

By default, the `SelectDirective` persists the selected items by their hierarchical index. To display initially selected TreeView items, use the [`selectedKeys`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective#selectedkeys) property and pass a list of hierarchical indices.

The following example demonstrates how to persist multiple selected items by their hierarchical index.

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

### Using DataItem Field

To persist the multiple selection by an item field, use the [`selectBy`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective#selectby) property. This approach ensures that selected items remain selected even when the tree structure changes due to data operations.

The following example demonstrates how to select multiple TreeView items by the `text` field.

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

## Modifying the Selection Behavior

When the user modifies the selection, the TreeView emits the [`selectionChange`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#selectionchange) event. It contains the following information:

* [`index`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeitem#index)—The hierarchical index of the affected TreeView item.
* [`dataItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeitem#dataitem)—The data item of the selected TreeView item.

You can render a specific item as selected by collecting the provided information and using the [`isSelected`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#isselected) callback that determines whether a given item is selected.

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

## Suggested Links

* [`SelectDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectdirective)
* [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/selectablesettings)
* [`TreeItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeitem)
* [API Reference of the `TreeViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent)
* [API Index of the TreeView](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api)