Keyboard Navigation

We can single out 2 types of navigation in DataGrid:

1. Changing the selection
2. Moving to another editor

When one of the types is available, the other is blocked. I.e. when you open some cell editor, you won’t change the selection any more, but can go to another editor within cells available for editing.

Once all editors are closed, you can again move selection to another cell (row, column).

Selection Navigation

The selection navigation is enabled by default in DataGrid.

Table 1 Keyboard commands for navigating the selection

Command	Description
Up arrow key	moves one cell (row) to the up
Down arrow key	moves one cell (row) to the down
Left arrow key	moves one cell (column) to the left
Right arrow key	moves one cell (column) to the right
Home	moves to the top left cell(row, column) in the grid
End	moves to the bottom right cell(row, column) in the grid
PGUP	scrolls the grid up
PGDN	scrolls the grid down

Related sample:  Navigation in DataGrid

Setting Focus on DataGrid

You can set focus on DataGrid with the help of the UIManager module:

Focusing widget with "books" ID

webix.grid({ id:"books" });
webix.UIManager.setFocus("books"); //to set focus
$$("books").select($$("books").getFirstId()); //to mark focusing visually

Active Editor Navigation

Active editor navigation is navigating within cells available for editing: closing the currently active editor and opening the editor in the next/previous cell.

The navigation is activated once you enable editing in the grid.

webix.grid({
  editable:true
});

Table 2 Keyboard commands for navigating the active editor

Command	Description
Tab	closes the current editor and opens the next one
Shift + Tab	closes the current editor and opens the previous one

You can read more about editing and active editor navigation in article DataGrid Editing.

Related sample:  The Tab Key Navigation