Expanded State
The TreeList enables you to define and persist the expanded state of its items.
Basics
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
isExpandedis not set, the TreeList will expand all items and will not show expand / collapse icons for the expandable column.
Built-in Directive
The TreeList provides a built-in directive to simplify controlling the expanded state. The ExpandableDirective automatically handles the expand and collapse events and provides the isExpanded function to the TreeList.
The following example demonstrates using the 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.
The following example demonstrates persisting the expanded state by 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.
The following example demonstrates persisting using a custom field to persist the state.
Initially Expanded
The directive supports expanding all items by default via the initiallyExpanded option.
If
initiallyExpandedis set to true,expandedKeyswill hold the keys of the collapsed items.
The following example demonstrates expanding all items by default.
