Grid - Keyboard Navigation

Focus

• Alt + W focuses the first component in the example

Supported keys and user actions

Data Element

• Right arrow moves the focus one cell to the right.
• Left arrow moves the focus one cell to the left.
• Up arrow moves the focus one cell up.
• Down arrow moves the focus one cell down.
• 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 + End moves focus to the last cell in the last loaded row in the grid. Useful when you want to go to the pager.
• Space selects the current row. Applicable only when row selection happens through the entire row (the default behavior).
• Shift + Space selects the current row. When multiple selection is enabled, extends the selection to it. Equivalent to Shift+Click.
• Ctrl + Space selects or unselects the current row. Equivalent to Ctrl+Click.
• 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.
• F2 enters edit mode for a data cell when the grid is in InCell EditMode.
• Esc if editor is opened, cancels the edit and closes the editor. In Command cell if focus is on a button, returns the focus back to the cell.
• Enter activates editing for the data cell when the grid is in InCell EditMode. In EditMode – saves changes and closes the editor. When a header cell is focused applies sorting. When a hierarchy cell is focused expands/collapses the detail template. When a template cell or a command cell is focused, focuses the first focusable element inside.
• Page Down loads the next page of data. If virtual scrolling is used, scrolls one page down.
• Page Up loads the previous page of data. If virtual scrolling is used, scrolls one page up.

Command Column

• Enter moves focus inside the command column.
• Tab moves focus between the elements inside the column.
• Esc moves focus back to the grid data element so you can navigate it.

Checkbox Column

• Enter focuses the checkbox inside the column.
• Space If row selection is allowed only through checkboxes, toggles the row selection only if the checkbox is focused. If row selection is allowed through the entire row, toggles the row selection even if the cell is focused, not the checkbox.
• Esc moves focus back to the table cell if the checkbox is focused.

Edited Row

• Tab moves focus between the focusable elements in the row so you can use their keyboard shortcuts. With InCell edit mode, opens the next/previous cell for editing.

  To exit the InLine edit mode, go to the Update or Cancel button in the command column.
  To exit the PopUp edit mode, go to the Save or Cancel button in the popup itself.
  To exit the InCell edit mode, move focus away from the grid. Pressing Enter on the last row also ends edit mode, but on other rows it puts the next row in edit mode to allow fast data entry.

Pager

• Arrow keys move the focus between the page buttons.
• Enter selects the current page/button.

Filter Row

• Arrow keys move the focus between the cells as in the standard cell navigation.
• Enter focuses the filter input so you can start typing and filtering.
• Tab when the input or filter buttons are focused cycles through the inputs. From the last filter cell, focus goes to the next focusable element on the page.
• Esc focuses the table cell after typing in the filter input so you can navigate the rest of the grid.

Filter Menu

• Tab when the header cell is focused, focuses the filter menu button so you can open it. When the filter menu is open, lets you navigate across the components in the filter menu so you can use their keyboard shortcuts.
• Shift + Tab when the filter menu button is focused, moves the focus back to the header cell so you can navigate the rest of the grid.
• Alt + Down arrow opens the filter menu.
• Esc when the filter menu is expanded, hides the menu. If a dropdown inside is opened, closes the dropdown.

Multi-checkbox Filter

• Tab moves focus between the search input, checkboxes and action buttons.
• Space toggles a checkbox (the default behavior).
• Enter if the focus is on an action button, triggers its action.
• Esc closes the menu.

Column Menu

• Alt + Down arrow when the header cell is focused, opens the filter menu.
• Arrow down or Arrow up focuses the next/previous item in the Column Menu.
• Enter activates the focused action in the Column Menu.
• Esc closes the Column Menu. If the focus is inside a dropdown list of a "Filter", for example, press Esc twice to close the Column Menu. The first press will close the dropdown and the second - the Column Menu
• Tab moves the focus from the parent item to the inner items, and then between the elements in the inner items.

Group Row

• Enter toggles the row expanded state.
• Arrow down or Arrow up focuses the next/previous group row if any. Otherwise, focuses a cell in the content row.

Detail Template Cell

• Enter toggles the detail expanded state.
• Tab focuses the first focusable element in the detail template.

Popup Editor

• Tab moves focus to the next element in the form.
• Esc closes the form (equivalent to clicking Cancel).

Description