New to Telerik UI for Blazor? Download Free 30-day trial

Grid - Keyboard Navigation

1 - 10 of 77 items
  • Keyboard-navigation.razor
  • ProductService.cs
  • ProductDto.cs
Loading the demo source code...please wait.

Focus

  • Alt + W focuses the first component in the example

Supported keys and user actions

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.

Toolbar

  • Right arrow and Left arrow moves the focus between the toolbar focusable elements.
  • Home focuses to the first focusable element.
  • End focuses to the last focusable element.

Group Header

  • Right arrow and Left arrow moves the focus between the toolbar focusable elements.
  • Home focuses to the first focusable element.
  • End focuses to the last focusable element.
  • Delete or Backspace deletes the grouping for the focused field name.

Pager

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

Data Grid Focus

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.

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

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

To enable the keyboard navigation of the Telerik UI for Blazor Grid set Navigable="true", as demonstrated in this demo.

This Data Grid Keyboard Navigation example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.