New to Telerik UI for Blazor? Download Free 30-day trial
Grid - Keyboard Navigation
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
|Product Name||Unit Price||Discontinued|
|Chef Anton's Cajun Seasoning||22.00||False|
|Chef Anton's Gumbo Mix||21.35||True|
|Grandma's Boysenberry Spread||25.00||False|
|Uncle Bob's Organic Dried Pears||30.00||False|
|Northwoods Cranberry Sauce||40.00||False|
|Mishi Kobe Niku||97.00||True|
Supported keys and user actions
Managing FocusThe 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.
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 roving tab index.key moves focus through all focusable elements and the grid does not block it - it uses
All Grid Cells
Grid Data Cells
In a row selection scenario
Grid header cells
Command column cells
Inline Edit Row
Incell Edit Cell
Detail Template Master Row
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.