Blazor DataGrid Example - Keyboard Navigation
Keyboard shortcuts can be used to interact with DataGrid functionality. In the example below, various key combinations can be used to interact with the grid.
Drag a column header here to group its column
Order ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Customer ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Freight Press Enter to sort. Press Alt Down to open filter Menu | Order Date Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Ship Country Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu |
|---|
| 10001 | ALFKI | $2.30 | 5/15/1991 | Denmark |
| 10002 | ANATR | $3.30 | 4/4/1990 | Brazil |
| 10003 | ANTON | $4.30 | 11/30/1957 | Germany |
| 10004 | BLONP | $5.30 | 10/22/1930 | Austria |
| 10005 | BOLID | $6.30 | 2/18/1953 | Switzerland |
| 10006 | ALFKI | $4.60 | 5/15/1991 | Denmark |
| 10007 | ANATR | $6.60 | 4/4/1990 | Brazil |
| 10008 | ANTON | $8.60 | 11/30/1957 | Germany |
| 10009 | BLONP | $10.60 | 10/22/1930 | Austria |
| 10010 | BOLID | $12.60 | 2/18/1953 | Switzerland |
| 10011 | ALFKI | $6.90 | 5/15/1991 | Denmark |
| 10012 | ANATR | $9.90 | 4/4/1990 | Brazil |
The key combinations listed below can be used in the grid to initiate various actions.
- FOCUS ELEMENTS
- Alt + J - Moves the focus to the grid element.
- 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 our DataGrid component.
- Ctrl + End - Moves the focus to the last Cell of the last row in our DataGrid 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.
- Alt + W - Move the focus to the first cell of the grid content.
- 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.
- 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 Normal/Dialog or Starts editing of selected cell if Mode is Batch.
- Esc - Cancels the editing of the particular row/cell.
- Del - Deletes the current selected record.
- Insert - Creates a new add form depending on the NewRowPosition.
- Tab - Navigates to the next editable cell if the Mode is Normal or Dialog / Saves the current cell and starts editing the next cell if Mode is Batch.
- Shift + Tab - Navigates to the previous editable cell if the Mode is Normal or Dialog / Saves the current cell and starts editing the previous cell if Mode is Batch.
- Enter - Saves the current form if the Mode is Normal or Dialog / 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.
- FILTERING
- Alt + Down arrow - Opens the filter menu(excel, menu and checkbox filter) when its header element is in focused state.
- SORTING
- Ctrl + Enter - Performs multi-sorting on a column when its header element is in focused state.
- Shift + Enter - Clears sorting for the focused header column.
- Enter - Performs sorting(ascending/descending) on a column when its header element is in focused state.
- GROUPING
- Alt + Down arrow - Expands the Selected Grouped Cell.
- Ctrl + Down arrow - Expands all the Visible Group.
- Alt + Up arrow - Collapses the selected group.
- Ctrl + Up arrow - Collapses all the visible groups.
- 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 DataGrid.