Example of Keyboard Navigation Functional in React Grid Component

All Controls
/
Grid
/
KeyboardNavigation

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.

More Details...

Drag a column header here to group its column
1 of 70 pages (830 items)
Description

  • 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 upward from the selected 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.