Grid - Keyboard Navigation

Focus

• Alt + W focuses the first component in the example

Supported keys and user actions

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 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 EditMode.
• 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.

In a row selection scenario

• 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.

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.

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.

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.

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.

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).

Group Row

• Enter Expands/Collapses the row

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).

Checkbox Column

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

Description