# Selection Basics

The [Angular TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist) enables the user to select single or multiple cells and rows. It provides a rich API for customizing the selection logic and persisting the selected items based on specific requirements.

## Setup

Enable the selection by applying the built-in [`kendoTreeListSelectable`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective) directive.

To configure the selection, use the [`selectable`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#selectable) option. It accepts a `boolean` or [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectablesettings) parameters.

If you use a `SelectableSettings` parameter, the Kendo UI TreeList for Angular enables you to specify the following options:

* `mode`—Sets the mode of the selection either to `"row"` or `"cell"`. The default value is `"row"`.
* `multiple`—Determines if multiple selection is enabled. The default value is `false`.
* `drag`—Configures the drag selection. The default value is `true`, but it does not apply unless `multiple` is set to `true`.
* `enabled`—Determines if the selection functionality is enabled. The default value is `true`.
* `checkboxOnly`—Determines if the row selection is possible only when the user clicks a checkbox. The default value is `false`.
* `readonly`—Determines whether the end user will be able to modify the selection. When the selection functionality is enabled and `readonly` is set to `true`, programmatic selection is still possible by using the [`selectedItems`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#selecteditems) collection or the [`isSelected`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#isselected) callback.

> The TreeList selects only the items on the current page. To select all items or persist the selection across pages, refer to the [Row Selection](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/row-selection) and [Persisting the Selection](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/persisting) articles.

The following example demonstrates the different selection modes and settings for the TreeList component.

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

The following articles cover common selection scenarios:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/selection/row-selection">
      <ComponentTitle>Row Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Enable users to select single or multiple rows with checkboxes, keyboard navigation, and programmatic control.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/selection/cell-selection">
      <ComponentTitle>Cell Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Allow users to select individual cells or cell ranges with mouse and keyboard interactions.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/selection/persisting">
      <ComponentTitle>Persisting the Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Maintain selected items across data operations like sorting, filtering, and paging.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/treelist/selection/custom-selection">
      <ComponentTitle>Custom Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Implement custom selection logic and behavior to meet specific application requirements.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Toggling Selection Dynamically

To control the selection state dynamically, bind the [`selectable`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#selectable) option to a component property.

```html
<button (click)="toggleSelection()">Toggle Selection</button>
<kendo-treelist
    [data]="data"
    [selectable]="isSelectable"
    kendoTreeListSelectable>
    ...
</kendo-treelist>
```

```ts
public isSelectable = true;

public toggleSelection(): void {
    this.isSelectable = !this.isSelectable;
}
```

To disable the selection initially while keeping the ability to enable it later, pass a [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectablesettings) object with [`enabled`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectablesettings#enabled) set to `false`:

```html
<kendo-treelist ...
    [selectable]="selectableSettings"
    kendoTreeListSelectable
    [(selectedItems)]="mySelection">
    ...
</kendo-treelist>
```

```ts
public selectableSettings: SelectableSettings = {
    enabled: false
};

public enableSelection(): void {
    this.selectableSettings = { enabled: true };
}
```

## Handling Selection Changes

When the user modifies the selection the TreeList emits a [`selectionChange`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#selectionchange) event returning a [`SelectionChangeEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectionchangeevent) object. This object contains information about the current selection state, including the selected and deselected items.

Use this event to update external UI elements, calculate totals, enable or disable actions based on the number of selected items, or track user selection behavior.

The following example demonstrates how to handle the `selectionChange` event to respond to user selection changes.

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

## Suggested Links

* [`SelectableDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective)
* [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectablesettings)
* [`SelectionChangeItem`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectionchangeitem)
* [API Reference of the `TreeListComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api)