Grid Functionality / Keyboard Navigation

Theme

Description

This example shows the keyboard navigation and accessibility support of the Shield UI Grid widget.
You can use the following keys, comforming to the latest WAI-ARIA specification, to work with the widget:

Ctrl + G - focuses the grid in this example only (not built-in functionality)

Arrow keys - moves the focus between cells
Page Up - navigates to the previous page if pagination is turned on
Page Down - navigates to the next page if pagination is turned on
Home - moves the focus to the first cell in the row that contains focus
End - moves the focus to the last cell in the row that contains focus
Ctrl + Home - moves focus to the first cell in the first visible row
Ctrl + End - moves focus to the last cell in the last visible row

Enter - when pressed on a header cell, invokes sorting for that column
Space - selects the current cell/row if selection is enabled

Enter - when pressed on an editable cell, disables grid navigation and puts this cell/row in edit mode
Enter - if grid navigation is disabled, saves all changes and restores grid navigation
Escape - if grid navigation is disabled, cancels any edits and restores grid navigation

TAB - moves focus to next widget in the grid
Shift + TAB - moves focus to previous widget in the grid

Was this example useful?