• Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Keyboard Navigation in ASP.NET Core Data Grid Control

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.

DEMO
SOURCE

The key combinations listed below can be used in the grid to initiate various actions.

  • FOCUS ELEMENTS
    • 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.
    • Right arrow / Tab- Moves the cell focus right side from the focused cell.
    • Left arrow / Shift+Tab- Moves the cell focus left side from the focused cell.
    • Alt+J- Moves the focus to the entire grid.
    • Alt+W- Move the focus to the grid content element
  • PAGER
    • Page down / Right arrow- Navigates to the next page.
    • Page up / Left arrow- Navigates to the previous page.
    • Enter / Space- Select the currently focused page.
    • Tab- Focus on the next pager item.
    • Shift+Tab- Focus on the previous pager item.
    • Home / Ctrl+Alt+Page up- Navigates to the first page.
    • End / Ctrl+Alt+Page down- Navigates to the last page.
  • 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.
    • Enter- Moves the row/cell selection downward from the selected cell/row
    • 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.
    • Enter- Saves the current form it the Mode is Normal or Dialog / Saves the current cell and starts editing the next row cell if Mode is Batch.
    • 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 is 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 is 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
    • Enter- Performs sorting(ascending/descending) on a column when its header element is in focused state.
    • 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.
  • GROUPING
    • Ctrl+Down arrow- Expands all the Visible Group.
    • Ctrl+Up arrow- Collapses all the visible groups.
    • Ctrl+Space- Performs grouping when focused on a header element.
    • Enter- If the current cell is an expand/collapse cell then expands/collapses the current group/detailrow/childgrid.