Angular TreeList Expanded State
The TreeList enables you to define and persist the expanded state of its items.
Getting Started
The TreeList exposes the following options to control the expand state:
isExpanded
function—Determines if a given item is expanded.collapse
event—Fired when a given item is about to be collapsed.expand
event—Fired when a given item is about to be expanded.
If
isExpanded
is not set, the TreeList will expand all items and will not show expand / collapse icons for the expandable column.
The following example demonstrates how to control the expanded state of the TreeList items.
Built-in Directive
The TreeList provides a built-in ExpandableDirective
to simplify controlling the expanded state. The kendoTreeListExpandable
directive automatically handles the expand
and collapse
events and provides the isExpanded
function to the TreeList.
<kendo-treelist
[kendoTreeListFlatBinding]="data"
kendoTreeListExpandable
...
>
...
</kendo-treelist>
The following example demonstrates how to use the built-in directive.
Setting the Expanded Items
To set the initially expanded items, bind an array with the expanded item keys to the expandedKeys
input.
By default, the directive uses the TreeList idField
as key. If the idField
is not set, the directive will use the item reference.
<kendo-treelist
[kendoTreeListFlatBinding]="data"
kendoTreeListExpandable
[(expandedKeys)]="expandedIds"
idField="id"
...
>
...
</kendo-treelist>
The following example demonstrates how to set the initially expanded items using the id field.
Custom Expand Field
To change the field which is used to persist the expanded items, set the expandBy
input to the field name or a function that takes the item and returns the key value.
<kendo-treelist
[kendoTreeListFlatBinding]="data"
kendoTreeListExpandable
expandBy="name"
...
>
...
</kendo-treelist>
The following example demonstrates how to persist the expanded using a custom field.
Initially Expanded
The directive supports expanding all items by default via the initiallyExpanded
option.
If
initiallyExpanded
is set to true,expandedKeys
will hold the keys of the collapsed items.
The following example demonstrates how to expand all items on initialization.