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

Persisting the Expanded State

The TreeView enables you to define and persist the expanded state of its nodes when the component is re-rendered.

Basics

The TreeView exposes the following options to control the expand state:

  • isExpanded (function)—Determines if a given node is expanded.
  • collapse (event)—Fired when a given node is about to be collapsed.
  • expand (event)—Fired when a given node is about to be expanded.
Example
View Source
Change Theme:

Built-in Directives

To persist the expanded state of the TreeView, either:

Using the Built-In Directive

By default, the built-in ExpandDirective persists the expanded items based on their hierarchical index.

The TreeView renders the expand icons only after the children and hasChildren functions are defined.

Example
View Source
Change Theme:

Setting an Item Field

You can also persist the expanded state of the TreeView by item field—for example, the id field.

Example
View Source
Change Theme:

Expand Disabled Nodes

The component can be configured to allow exapnding disabled nodes by setting the expandDisabledNodes option to true.

Example
View Source
Change Theme: