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
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme:

Setting an Item Field

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

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?