Selection Basics

Updated on Sep 1, 2026

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

To configure the selection, use the selectable option. It accepts a boolean or 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 collection or the 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 and Persisting the Selection articles.

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

Example

View Source

Loading ...

The following articles cover common selection scenarios:

Row Selection

Enable users to select single or multiple rows with checkboxes, keyboard navigation, and programmatic control.

Cell Selection

Allow users to select individual cells or cell ranges with mouse and keyboard interactions.

Persisting the Selection

Maintain selected items across data operations like sorting, filtering, and paging.

Custom Selection

Implement custom selection logic and behavior to meet specific application requirements.

Toggling Selection Dynamically

To control the selection state dynamically, bind the 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 object with 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 event returning a 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.

Example

View Source

Loading ...

Suggested Links

• SelectableDirective
• SelectableSettings
• SelectionChangeItem
• API Reference of the TreeListComponent
• API Index of the TreeList