Blazor Tree Grid Example - Checkbox Selection
This sample uses checkbox selection to demonstrate the Tree Grid's selection functionality. Use the header checkbox to select and deselect all rows. To select or deselect a specific row, click the checkbox in desired row.
Task ID | Task Name | Start Date | Duration | Progress | Priority |
|---|
| 1 | Parent task 1 | 8/28/2022 | 34 | In Progress | Critical | |
| 2 | Child task 1 | 8/29/2022 | 1 | Validated | Critical | |
| 3 | Child task 2 | 8/30/2022 | 98 | Open | Low | |
| 4 | Sub task 1 | 8/29/2022 | 67 | Closed | Normal | |
| 5 | Sub task 2 | 8/30/2022 | 14 | Closed | Normal | |
| 6 | Sub task 3 | 8/31/2022 | 67 | Closed | Normal | |
| 7 | Parent task 2 | 8/29/2022 | 52 | Open | Low | |
| 8 | Child task 3 | 8/29/2022 | 1 | Validated | Critical | |
| 9 | Child task 4 | 8/30/2022 | 98 | Open | Low | |
| 10 | Sub task 4 | 8/29/2022 | 67 | Closed | Normal | |
| 11 | Sub task 5 | 8/30/2022 | 14 | Closed | Normal | |
| 12 | Sub task 6 | 8/31/2022 | 67 | Closed | Normal |
To display a checkbox in each Tree Grid row, set the Type property of TreeGridColumn to Checkbox.
The PersistSelection property of TreeGridSelectionSettings can be used to persist selection across all Tree Grid operations. Any of the columns should be defined as a primary key using the IsPrimaryKey property of TreeGridColumn for persistent selection.
In this demo, Tree Grid multiple selection has been enabled with selection persistence.
More information on the checkbox selection feature can be found in this documentation section.