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

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: