Blazor Tree Grid Example - Default Selection
This sample demonstrates Tree Grid's selection feature, which allows you to select a row or cell with a simple mouse down or keyboard interaction.
Task ID | Task Name | Start Date | End Date | Duration | Progress |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | In Progress |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Validated |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Open |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Closed |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Closed |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Closed |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Open |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Validated |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Open |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Closed |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Closed |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Closed |
Selection Type |
|
Selection Mode
|
|
Cell Selection Mode
|
The selection feature allows you to highlight the row or cell that you select interactively. A simple mouse down or keyboard interaction can be used to make a selection. Set AllowSelection property to true to enable selection.
Tree Grid supports two types of selection which can be set using the TreeGridSelectionSettings->Type property. They are,
SelectionType.Single- By default, it is enabled. Allows the user to select only one row or cell at a time.SelectionType.Multiple- Allows the user to select multiple rows/cells at once.
Hold down the CTRL key and click the desired rows/cells to perform a multi-selection. Hold the SHIFT key and click the rows/cells to select a range of rows/cells.
When using the Tree Grid in a touch device environment, tap on the row to bring up a popup with the multi-selection icon. Then tap the icon for multiple selection with a single click.
More information on selection can be found in this documentation section.