All docs
V24.2
24.2
24.1
23.2
23.1
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery DataGrid - Custom Keyboard Navigation

You can use the keyboardNavigation property to configure DataGrid keyboard navigation. If the default behavior does not meet your requirements, you can change it.

Change the Default Focused Cell

To specify cell focus order when a user navigates through DataGrid, call the onFocusedCellChanging function. The code below uses newColumnIndex to set the column index of the next focused cell.

index.js
  • $("#dataGridContainer").dxDataGrid({
  • // ...
  • onFocusedCellChanging: function (e) {
  • if (e.columns[e.newColumnIndex].dataField === "myField") { // Checks if the next focused cell is in the 'myField' column
  • e.newColumnIndex++; // Navigates to the next column
  • }
  • }
  • });

Focus Cells Programatically

You can call the following methods to focus a cell:

  • focus
    Allows you to move focus to a cell. Call the getCellElement method to obtain a cell container. Then, pass the container to the focus method as an argument to focus the target cell.

  • editCell
    Switches a cell to the edit state and moves focus to this cell.

Override and Create Keys

The onKeyDown event handler allows you to track pressed keystrokes while the UI component has focus. You can use the event handler to override the default keyboard shortcuts, implement custom keystrokes, or extend existing ones.

The following example shows how to override the Space Bar keystroke so it switches a cell in cell/batch mode to the edit state instead of a current row select operation:

index.js
  • $("#dataGridContainer").dxDataGrid({
  • // ...
  • onKeyDown: function (e) {
  • if (e.event.keyCode === 32) { // Checks if the space bar key is pressed
  • e.event.preventDefault(); // Prevents the default behavior
  • const focusedRowIndex = e.component.option("focusedRowIndex");
  • const focusedColumnIndex = e.component.option("focusedColumnIndex");
  • e.component.editCell(focusedRowIndex, focusedColumnIndex);
  • }
  • }
  • })