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

Selection Basics

Updated on Oct 30, 2025

The TreeList allows 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 both boolean and 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. The default value is false.

When the selection functionality is enabled and readonly is set to true, programmatic selection is possible by using the selectedItems collection or the isSelected callback.

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

Change Theme

Theme

Loading ...

The following articles cover a range of common selection scenarios, offering detailed guidance and insights for each:

Row Selection

Enable users to select entire rows with single or multiple selection modes.

Cell Selection

Allow users to select individual cells within the TreeList for granular data interaction.

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.

Selection Change Event

When the user modifies the selection, the TreeList emits one or more selectionChange events. Each contains the following information:

action—A verb that describes the user action:
- "select"—When resetting the selection, for example, on item Click.
- "add"—When adding items to the selection, for example, on item Ctrl + Click.
- "remove"—When removing items from the selection, for example, on item Ctrl + Click.
items—A collection of items affected by the action.
sender—A reference to the TreeListComponent.

Disabling the Selection of Specific Elements

By default, the TreeList handles clicks over non-focusable elements and performs selection. To disable the default behavior for custom or specific non-focusable elements, set the "k-treelist-ignore-click" class.