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

Grid - Keyboard Navigation

May 10, 202147Mild
May 09, 202116Chilly
April 27, 202116Balmy
April 30, 2021-1Bracing
May 12, 202142Balmy
May 15, 202120Bracing
May 03, 202147Bracing
May 07, 202153Balmy
April 28, 20212Bracing
April 26, 202137Balmy
  • Keyboard-navigation.razor
  • WeatherForecastService.cs
  • WeatherForecast.cs
Loading the demo source code...please wait.

Focus

  • Alt + W focuses the first component in the example

Supported keys and user actions

Tab Focus

The Tab key moves focus through all focusable elements on the page and the grid does not block it - it uses roving tab index for its data portion.

This means that you can go through the grid toolbar and filter row with the Tab key, then the focus goes through the data portion of the grid and you can navigate through the cells and rows with the arrow keys. To focus the pager, use the down arrow key from the last row.

Pressing Tab from the data portion will move the focus to the next focusable element on the page - this can be some focusable element in the currently focused row (like a button or an input in a cell or template), or the next focusable element on the page after the grid (depending on the tab order of the page).

Toolbar

The toolbar of the grid is a template, and it is within the TabIndex of the grid, so you do not need to defined explicit TabIndex attributes to elements inside it. Doing so may put them after the grid in the general tab order of the page.

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

If the focus is in the last grid row, you can focus the pager by pressing Arrow down

  • 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

You can navigate through the Telerik Grid for Blazor using your keyboard. To enable that built-in feature use the Navigable parameter and set it to true. After the rendered component you can see a list of the possible key combinations and what actions do they perform. For example, clicking on Alt and W focuses the first component on the page. The Alt and Down Key combination opens the popup of the Filter Menu. To move the focus to the Filter Menu icon use the Tab key.

Support & Learning Resources

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