Selection Basics
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 isfalse
.drag
—Configures the drag selection. The default value istrue
, but it does not apply unlessmultiple
is set totrue
.enabled
—Determines if the selection functionality is enabled. The default value istrue
.readonly
—Determines whether the end user will be able to modify the selection. The default value isfalse
.When the selection functionality is enabled and
readonly
is set totrue
, programmatic selection is possible by using theselectedItems
collection or the isSelected callback.
The following articles cover a range of common selection scenarios, offering detailed guidance and insights for each:
The following example demonstrates the different selection modes and settings for the TreeList component.
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 itemClick
."add"
—When adding items to the selection, for example, on itemCtrl + Click
."remove"
—When removing items from the selection, for example, on itemCtrl + Click
.
items
—A collection of items affected by the action.sender
—A reference to theTreeListComponent
.
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.