Keyboard Support

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

Key Action
← → ↑ ↓ Navigates through cells
Shift + Mouse Wheel Scrolls the content left/right if the horizontal scrolling is taking place.
Enter
  • Switches a cell into the editing state.
  • Saves changes made in a cell or row and switches it back to its normal state.
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 box1, a calendar2, 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.4
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.4
Ctrl + A Selects all rows.3,5
Ctrl + F Focuses the search panel.6
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.7
Ctrl + → / Ctrl + ← Expands/collapses the focused row.
1 - A select box appears in a cell of a lookup column.
2 - A calendar appears in a data cell when a column contains "date" type data.
3 - selection | mode must be different from "none".
4 - selection | mode must be "multiple".
5 - selection | allowSelectAll must be true.
6 - The search panel must be visible.
7 - sorting | mode must be "multiple".

You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.

jQuery
JavaScript
function registerKeyHandlers () {
    let treeList =  $("#treeListContainer").dxTreeList("instance");
    treeList.registerKeyHandler("backspace", function (e) {
        // The argument "e" contains information on the event
    });
    treeList.registerKeyHandler("space", function (e) {
        // ...
    });
}
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent
    registerKeyHandlers () {
        this.treeList.instance.registerKeyHandler("backspace", function (e) {
            // The argument "e" contains information on the event
        });
        this.treeList.instance.registerKeyHandler("space", function (e) {
            // ...
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also