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.
jQuery
$("#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
}
}
});Angular
<dx-data-grid ...
(onFocusedCellChanging)="onFocusedCellChanging($event)">
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onFocusedCellChanging(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
}
}
}Vue
<template>
<DxDataGrid ...
@focused-cell-changing="onFocusedCellChanging">
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid
},
// ...
methods: {
onFocusedCellChanging(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
}
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
const onFocusedCellChanging = (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
}
}
function App() {
return (
<DataGrid ...
onFocusedCellChanging={onFocusedCellChanging}>
</DataGrid>
);
}
export default App;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:
jQuery
$("#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);
}
}
})Angular
<dx-data-grid ...
(onKeyDown)="onKeyDown($event)">
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onKeyDown(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);
}
}
}Vue
<template>
<DxDataGrid ...
@key-down="onKeyDown">
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid
},
// ...
methods: {
onKeyDown(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);
}
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
const onKeyDown = (e) => {
if (e.event.keyCode === 32) { // Specifies 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);
}
}
function App() {
return (
<DataGrid ...
onKeyDown={onKeyDown}>
</DataGrid>
);
}
export default App;