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

Persisting the Selection

Updated on Sep 1, 2026

The Angular 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.

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

Loading ...

To enable selection persistence, apply the SelectableDirective and set the 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 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.
Using a custom key function.

By default, row selection is persisted using the 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 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.

Loading ...

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 property accepts a function that returns the key to use for a given data item—for example, a composite key.

html
<kendo-treelist kendoTreeListSelectable [itemKey]="compositeKey" [(selectedItems)]="selected" ...></kendo-treelist>
ts
public compositeKey = (dataItem: LoanPortfolioNode) => `${dataItem.id}_${dataItem.loanNumber}`;

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

Loading ...

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 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.
Using custom key functions.

By default, cell selection is persisted using the 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 to a unique field for row identification. The column is identified by its index by default. To customize the column key, use the 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.

Loading ...

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 and columnKey properties accept functions that return custom keys for rows and columns.

html
<kendo-treelist
    kendoTreeListSelectable
    [itemKey]="itemKey"
    [columnKey]="columnKey"
    [(selectedItems)]="selected"
    ...>
</kendo-treelist>
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.

Loading ...

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.