# Persisting the Selection

The [Angular TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist) enables you to persist the selection state and maintain full control over which rows or cells are selected by using the built-in [`SelectableDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective).

The following example demonstrates a comprehensive approach to persist row selection in the TreeList. This includes programmatic selection and selection across sorting and filtering.

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

To enable selection persistence, apply the `SelectableDirective` and set the [`selectedItems`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#selecteditems) property to a collection that defines which rows or cells are selected. This directive enables you to:

* Select rows or cells programmatically from your component code.
* Maintain selection across sorting, filtering, and other data operations.
* Specify initially selected items when the TreeList loads.
* Update the selection dynamically based on your business logic.
* Control selection with any unique identifier from your data.

## Persisting Row Selection

To persist the selected rows, set the `selectedItems` property of the [`kendoTreeListSelectable`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective) directive to an array of keys that identify the selected rows. You can choose from two strategies to define these keys:

* [Using a data item field](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/persisting#using-a-data-item-field).
* [Using a custom key function](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/persisting#using-a-custom-key-function).

By default, row selection is persisted using the [`idField`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#idField) of the data item. If no `idField` is specified, the data item is persisted by reference.

### Using a Data Item Field

To persist row selection reliably across data operations, set the [`itemKey`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#itemkey) to a unique field from your data items—typically an `id` field.

```html
<kendo-treelist kendoTreeListSelectable itemKey="id" [(selectedItems)]="selected" ...></kendo-treelist>
```

The following example demonstrates how to persist selection by the `id` field and select rows programmatically.

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

This approach is recommended for most production scenarios. It maintains selection across sorting, filtering, and programmatic updates.

You can use this approach in e-commerce product catalogs, CRM customer records, and order management systems. Use it in any scenario where each row has a unique identifier like `ProductID`, `OrderID`, or `CustomerID`.

### Using a Custom Key Function

For advanced scenarios, the [`itemKey`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#itemkey) property accepts a function that returns the key to use for a given data item—for example, a composite key.

```html app.component.html
<kendo-treelist kendoTreeListSelectable [itemKey]="compositeKey" [(selectedItems)]="selected" ...></kendo-treelist>
```

```ts app.component.ts
public compositeKey = (dataItem: LoanPortfolioNode) => `${dataItem.id}_${dataItem.loanNumber}`;
```

The following example demonstrates how to persist selection with a custom key function.

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

Use this approach when your unique identifier requires complex logic:

* Composite primary keys (for example, `parentId-childId`).
* Multi-level hierarchies (for example, `divisionId-categoryId-loanId`).
* Versioned records (for example, `documentId-version`).

## Persisting Cell Selection

To persist the selected cells in the TreeList, set the [`selectedItems`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#selecteditems) property of the `SelectableDirective` to an array of keys that identify the selected cells. You can choose from two strategies to define these keys:

* [Using data item and column fields](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/persisting#using-data-item-and-column-fields).
* [Using custom key functions](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/selection/persisting#using-custom-key-functions).

By default, cell selection is persisted using the [`idField`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#idField) and the cell index as key. If no `idField` is specified, the data item is persisted by reference.

### Using Data Item and Column Fields

To persist cell selection reliably across data operations, set the [`itemKey`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#itemkey) to a unique field for row identification. The column is identified by its index by default. To customize the column key, use the [`columnKey`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#columnkey) property.

```html
<kendo-treelist
    kendoTreeListSelectable
    itemKey="id"
    [selectable]="{ mode: 'cell', multiple: true }"
    [(selectedItems)]="selected"
    ...>
</kendo-treelist>
```

The following example demonstrates how to store selected cells with the `id` field for rows and the cell index for columns.

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

This approach is recommended for most production scenarios. It maintains cell selection across sorting, filtering, and programmatic updates.

### Using Custom Key Functions

For advanced scenarios, the [`itemKey`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#itemkey) and [`columnKey`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective#columnkey) properties accept functions that return custom keys for rows and columns.

```html app.component.html
<kendo-treelist
    kendoTreeListSelectable
    [itemKey]="itemKey"
    [columnKey]="columnKey"
    [(selectedItems)]="selected"
    ...>
</kendo-treelist>
```

```ts app.component.ts
public itemKey = (dataItem: LoanPortfolioNode) => `${dataItem.id}_${dataItem.loanNumber}`;
public columnKey = (column: any, _columnIndex: number) => column.field;
```

The following example demonstrates how to store cell selection with custom key functions.

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

Use this approach when your unique identifier requires complex logic:

* Composite keys for rows or columns.
* Dynamic column configurations.
* Conditional identification based on cell content or state.

## 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)
* [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)