Blazor Tree Grid Example - Selection API
This sample demonstrates the Tree Grid's programmatic selection functionality. In this demo, you can select multiple rows from the properties panel by entering the start and end indexes and then clicking the select row button. Click the clear selection button to clear all selected rows.
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 |
Properties
| Select Rows | |
| Start | |
| To | |
| Select Row | |
| Clear Selection |
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 the following two types of selection, which can be set using the TreeGridSelectionSettings->Type property.
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.
It also supports the following three modes of selection, which can be set using the TreeGridSelectionSettings->Mode property.
Row- By default, it is enabled. Allows row selection in the Tree Grid.Cell- Allows cell selection in the Tree Grid.Both- Allows for both row and cell selection. By clicking any cell, you will select both the row and the cell at the same time.
Cell selection supports the following two modes, which can be configured using the TreeGridSelectionSettings->CellSelectionMode property.
Flow- By default, the Flow value is set. The range of cells is chosen between the start and end indexes, which includes cells in between rows.Box- A range of cells is chosen from the start and end column indexes, which includes cells in between rows within the range.
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.