Blazor Tree Grid Example - Keyboard Navigation
Tree Grid functionalities can be interactive with keyboard shortcuts. In the following sample, various key combinations can be used to interact with the Tree Grid.
Task ID | Task Name | Start Date | Duration |
|---|
| 1 | Parent task 1 | 8/28/2022 | 34 |
| 2 | Child task 1 | 8/29/2022 | 1 |
| 3 | Child task 2 | 8/30/2022 | 98 |
| 4 | Sub task 1 | 8/29/2022 | 67 |
| 5 | Sub task 2 | 8/30/2022 | 14 |
| 6 | Sub task 3 | 8/31/2022 | 67 |
| 7 | Parent task 2 | 8/29/2022 | 52 |
| 8 | Child task 3 | 8/29/2022 | 1 |
| 9 | Child task 4 | 8/30/2022 | 98 |
| 10 | Sub task 4 | 8/29/2022 | 67 |
| 11 | Sub task 5 | 8/30/2022 | 14 |
| 12 | Sub task 6 | 8/31/2022 | 67 |
All the Tree Grid actions can be controlled via keyboard keys. The applicable key combinations and its relative functionalities are listed below.
- FOCUS
- Alt + J Focus on Tree Grid component.
- Home Moves the focus to the first cell of the focused row.
- End Moves the focus to the last cell of the focused row.
- Ctrl + Home Moves the focus to the first Cell of the first row in the Tree Grid component.
- Ctrl + End Moves the focus to the last Cell of the last row in the Tree Grid component.
- Down arrow Moves the cell focus downward from the focused cell.
- Up arrow Moves the cell focus upward from the focused cell.
- Left arrow Moves the cell focus left side from the focused cell.
- Right arrow Moves the cell focus right side from the focused cell.
- Expand/Collapse
- Ctrl + Shift + Down arrow Expand Child Grid.
- Ctrl + Shift + Up arrow Collapse Child Grid.
- Ctrl + Down arrow ExpandAll.
- Ctrl + Up arrow CollapseAll.
- PAGER
- Page down Navigates to the next page.
- Page up Navigates to the previous page.
- Ctrl + Alt + Page down Navigates to the last page.
- Ctrl + Alt + Page up Navigates to the first page.
- Alt + Page down Navigates to the last pager.
- Alt + Page up Navigates to the first pager.
- SELECTION
- Shift + Down arrow Extends the row/cell selection downwards from the selected row/cell.
- Shift + Up arrow Extends the row/cell selection upwards from the selected row/cell.
- Shift + Left arrow Extends the cell selection to the left side from the selected cell.
- Shift + Right arrow Extends the cell selection to the right side from the selected cell.
- Shift + Enter Moves the row/cell selection upward from the selected row.
- Up arrow Moves the row/cell selection upward from the selected row.
- Tab Moves the cell selection right side from the selected cell.
- Shift + Tab Moves the cell selection left side from the selected cell.
- Esc Deselects all the selected row/cells.
- Ctrl + A Select all the row/cells in the current page.
- Up arrow Moves up a row/cell selection from the selected row/cell.
- Down arrow Moves down a row/cell selection from the selected row/cell.
- Right arrow Moves to the right cell selection from the selected cell.
- Left arrow Moves to the left cell selection from the selected cell.
- EDITING
- F2 Starts editing of selected row if Mode is Row or Dialog / Starts editing of selected cell if Mode is Batch or Cell.
- Esc Cancels the editing of the particular row/cell.
- Del Deletes the currently selected record.
- Insert Creates a new add form depending on the NewRowPosition.
- Tab Navigates to the next editable cell if the Mode is Row or Dialog / Saves the current cell and starts editing the next cell if Mode is Batch or Cell.
- Shift + Tab Navigates to the previous editable cell if the Mode is Row or Dialog / Saves the current cell and starts editing the previous cell if Mode is Batch or Cell.
- Enter Saves the current form if the Mode is Row or Dialog or cell / Saves the current cell and starts editing the next row cell if Mode is Batch.
- Shift + Enter Saves the current cell and starts editing the previous row cell if Mode is Batch.
- COPY
- Ctrl + C Copy selected rows or cells data into clipboard.
- Ctrl + Shift + H Copy selected rows or cells data with header into clipboard.
- PRINT
- Ctrl + P Prints the Tree Grid.
More information can be found in this documentation section.