DevExtreme Angular - Keyboard Support

A user can interact with the widget using the following keys:

Key Action
← → ↑ ↓
  • Navigates through cells if no cell is in the editing state.
  • In the editing state, moves cursor inside the cell or increases/decreases the cell value (depending on the editor).
Shift + Mouse Wheel Scrolls the content left/right if the horizontal scrolling is taking place.
Enter
  • Switches a cell to the editing state.1
  • Moves focus to the next cell.2
  • Saves changes made in a cell or row and switches it back to its normal state.
F2 Switches a cell to the editing state.3
Esc Cancels changes made in a cell or row and switches it back to its normal state.
Alt + ↓ Opens a drop-down editor (a select box4, a calendar5, etc.) in the editing state.
Space Selects the focused row and clears the selection of previously selected rows.3
Ctrl + Space or Ctrl + Click Selects or clears the selection of the focused row.
Previously selected rows remain selected.7
Shift + Space or Shift + Click Selects or clears the selection of a range of rows between the last selected or deselected and the focused rows.7,8
Ctrl + A Selects all rows.6,9
Ctrl + F Focuses the search panel.10
PageUp / PageDown Navigates to the previous/next page.
Tab / Shift + Tab Moves the focus one cell forward/back.
Focuses the first/last cell in the next/previous row if cells in the current row run out.
Shift + Click / Ctrl + Click
on a column header
Applies/clears sorting settings of the column.11
1 - If the enterKeyAction is "startEdit".
2 - If the edititng.mode is "cell" or "batch" and the enterKeyAction is "moveFocus".
3 - The editing.mode should be "cell" or "batch".
4 - A select box appears in a cell of a lookup column.
5 - A calendar appears in a data cell when a column contains "date" type data.
6 - The selection.mode should be different from "none".
7 - The selection.mode should be "multiple".
8 - If the scrolling.mode is "virtual", the rows should be visible simultaneously. If the mode is "standard", the rows should be on one page.
9 - selection.allowSelectAll should be true.
10 - The search panel should be visible.
11 - The sorting.mode should be "multiple".