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

Custom Selection

The TreeList provides low-level hooks for implementing custom selection logic.

Controlling Selected State

You can control the selection state by specifying the isSelected function. The function is executed for each row or cell in the TreeList and determines whether the item will be selected.

The built-in kendoTreeListSelectable directive applies its default isSelected callback to determine which rows or cells will be selected. To override the default behavior, do not apply the directive when using a custom isSelected callback. To refresh the selected state and force re-evaluation of the isSelected callback, invoke the TreeList updateView method.

The following example demonstrates how to define an isSelected callback:

Example
View Source
Change Theme:

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, e.g. on item Click.
    • "add"—when adding items to the selection, e.g. on item Ctrl + Click.
    • "remove"—when removing items from the selection, e.g. on item Ctrl + Click.
  • items—A collection of items affected by the action.
  • sender—A reference to the TreeListComponent.

Demo: Persist Selection in Data Items

The following example demonstrates how to use the isSelected callback and selectionChange event to persist the selected state as a field:

Example
View Source
Change Theme: