Blazor Tree Grid Example - Keyboard Navigation

This sample demonstrates comprehensive keyboard navigation and shortcuts for focus movement, expand/collapse, paging, selection, editing, copy, and print.

Keyboard interaction is enabled by default. The grid is configured with selection, paging, and row editing to illustrate common scenarios.

• 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 page.
  • Alt + Page up Navigates to the first page.
• SELECTION:
  • Shift + Down arrow Extends the row/cell selection downward from the selected row/cell.
  • Shift + Up arrow Extends the row/cell selection upward 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.
  • 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 on keyboard interaction can be found in the documentation section.