Grid - Keyboard Navigation

Focus

• Alt + W focuses the first component in the example

Managing Focus

The Grid component is a container that consists of the following 4 logically separated structural elements: Toolbar, Group Header, Data Grid and Pager. Each of them is part of the page tab sequence and can be navigated to using the Tab key of the keyboard.

Supported keys and user actions

ToolBar

The ToolBar implements the keyboard navigation specification for a ToolBar component. You can refer to ToolBar - Keyboard Navigation for its supported shortcuts.

Group Header

The Group header implements the keyboard navigation specification for a ChipList component. You can refer to ChipList - Keyboard Navigation for its supported shortcuts.

Data Grid

The Data Grid is a single tab stop component. Upon focusing the Data Grid, the initial focus is set to either the previously focused cell (if any), or the first data cell in the Data Grid. The Tab key moves focus through all focusable elements and the grid does not block it - it uses roving tab index.

Pager

The Pager implements the keyboard navigation specification for a Pager component. You can refer to Pager - Keyboard Navigation for its supported shortcuts.

All Grid Cells

• Right arrow moves focus one cell to the right (if any).
• Left arrow moves focus one cell to the left (if any).
• Up arrow moves focus one cell up (if any).
• Down arrow moves focus one cell down (if any).
• Home moves focus to the first cell in the row that contains focus.
• End moves focus to the last cell in the row that contains focus.
• Ctrl + Home moves focus to the first (top-left) data cell in the grid.
• Ctrl + End moves focus to the last cell in the last loaded row of the Grid.
• Page Down loads and displays the next page of data. If virtual scrolling is used, scrolls one page down.
• Page Up loads and displays the previous page of data. If virtual scrolling is used, scrolls one page up.

Grid Header Cells

• Enter if sorting is enabled, Sort is applied.
• Alt + Arrow Down opens the Column menu / Filter menu and moves focus to that menu.
• Esc closes Column menu / Filter menu.
• Ctrl + Space group/ungroup the focused column.
• Ctrl + Left Arrow reorders the column with the one on its left.
• Ctrl + Right Arrow reorders the column with the one on its right.

Column Menu

• Alt + Arrow Down when the header cell is focused, opens the column menu.
• Arrow Down focuses the next item in the column menu.
• Arrow Up focuses the previous item in the column menu.
• Enter activates the focused action in the column menu.
• Space toggles a checkboxmenuitem (if focused).
• Esc closes the column menu. If the focus is inside a dropdown list or a filter, closes the dropdown.

Filter Menu

• Alt + Arrow Down when a header cell is focused, opens the filter menu.
• Tab focuses the next item in the filter menu.
• Shift + Tab focuses the previous item in the filter menu.
• Esc closes the filter menu. Note that if a popup inside the menu is currently opened, Escape will close it instead. Pressing Escape a second time will close the menu.
• Space toggles a checkboxmenuitem (if focused).

Filter Row

• Arrow Keys moves to the next editor in the form.
• Enter enters in the td and focuses the first focusable element in it. All filter row components gain tabindex=0. Focus remains trapped inside the filter row.
• Tab goes through the filter row components.
• Esc focus goes to the td element wrapping the currently focused filter component.

Grid Data Cells

All scenarios

• Enter when the grid is in InCell EditMode - EditMode is activated. In hierarchy cell - expands /collapses the detail row. In grouping cell - expands /collapses the group. If the cell contains a focusable elements - focus moves to the first focusable element inside.
• F2 enters edit mode when the Grid is in Incell or Inline edit mode.
• Esc if editor is opened, cancels the edit and closes the editor. If focus is on an element inside a cell, returns the focus back to the cell.
• Delete or Backspace fires OnDelete for the current row, so the app can remove it from the Grid data.

Row Selection

• Space selects the row holding the currently focused cell.
• Ctrl + Space selects or deselects the current row, while persisting previously selected rows (only for selection mode "multiple").
• Shift + Space performs range selection, selects all the rows between the last selected one (with SPACE or mouse click) and the one holding the focused cell.
• Shift + Up Arrow selects the row above. When multiple selection is enabled, extends the selection to that row.
• Shift + Down Arrow Selects the row below. When multiple selection is enabled, extends the selection to that row.

Group Row

• Enter Expands/Collapses the row

Inline Edit Row

• Tab moves to the next editor in the row.
• Esc cancels the row edit. The focus goes to the command cell from where the row edit was triggered.

Incell Edit Cell

• Tab Moves to the next editor in the row (closing current editor). It skips cells with Editable=false and command columns. If focus is already on the last editable cell on the row, focus is moved to the first editable cell on the next row, and it's editor is opened. If we're already on the last row of the grid, focus remains on the cell, with the editor closed.
• Shift + Tab Moves to the previous editor in the row (closing current editor). It skips cells with Editable=false and command columns. If focus is already on the first editable cell on the row, focus is moved to the last editable cell on the previous row, and it's editor is opened. If we're already on the first row of the grid, focus remains on the cell, with the editor closed.
• Enter commits changes for the edited item, and moves focus to the same cell on the row below, opening it for edit.
• Esc cancels the edit. The focus goes to the current cell.

Popup Editor

• Tab moves to the next editor in the form.
• Esc closes the editor. The focus goes to the command cell from where the popup was opened.
• Enter triggers a submit action for the editor, including validation.

Command Column Cells

• Enter moves focus inside the command column. First button is focused. If a button is focused, triggers the button action.
• Esc if a button is focused, returns focus to the command cell.
• Tab moves focus to the next button in the column.
• Shift + Tab moves focus to the previous button in the column.

Checkbox Column Cells

• Space toggle checkbox. Toggling the checkbox selects/deselects a row.
• Esc returns focus to the cell.

Detail Template Master Row

• Enter toggles the detail template.
• Tab if expanded, focus the first focusable element inside the detail template (if any).
• Shift + Tab if on the first focusable item inside the template, returns focus to the Grid (first focusable cell).

Description