Selection

The TreeList enables the user to select a single row or multiple rows and provides checkbox and row-click selection options.

Getting Started

To implement row selection:

1. Use the onRowClick event.
2. Set the selectedField option.

As a result, the TreeList allows you to set the currently clicked item as selected. The selectedField option represents a field inside the data collection which determines the rows that will render as selected.

Example

View Source

Edit In Stackblitz  

Change Theme:Material theme

Customizing the Selection

The TreeList provides both checkbox and row-click selection options which can be applied to single or multiple records.

The checkbox selection enables the user to select a TreeList item by checking a checkbox and implements a master checkbox in the header that selects and deselects all items.

To configure the checkbox selection:

1. Set a selection column by setting the field property value of the column to be the same as the selectedField value of the TreeList.
2. Handle the TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent, and TreeListRowClickEvent events, and store the selected state of the rows in the state of the application.
3. In the render method of the application, set the selected state for each TreeList data item to the its selectedField field (that is, the updateFields function in the following example).

The following example demonstrates how to implement a multiple records selection both on row click and with checkboxes.

Example

View Source

Edit In Stackblitz  

Change Theme:Material theme

Suggested Links

• API Reference of the TreeList