Tree Views

Icons

Disabled State

Expand & Collapse

We can bind the tree view and trigger methods for expanding or collapsing all children at once.

Selection

Each tree view provides a number of selection options.

Single

When using single selection, our items are setup and treated as radio inputs.

Multiple

When using multiple selection, our items are setup and treated as checkbox inputs.

Relational

Use the children prop to create a relational connection between parent and children.

Toggle All

By binding to the tree view component we can then toggle selection for all items.

Note: Available only when using multiple selection mode.

Recursive Mode

Tree views can be generated using a recursive data-driven method.

Single Selection

Relational checking is automatically applied when generating your list in a recursive manner. Setting a child as checked will not automatically affect the parent.

Multiple Selection

Relational checking is automatically applied when generating your list in a recursive manner.