Blazor Tree Grid Example - Keyboard Navigation

Tree Grid / Miscellaneous / 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.

Loading Syncfusion Blazor Server Demos…

1 of 30 pages (60 items)

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.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE