The DevExpress ASP.NET MVC GridView extension includes built-in keyboard support, allowing you to perform navigation operations using a keyboard instead of a pointing device. For example, you can access the grid within a web page, move focus through grid rows, select grid rows, and expand/collapse rows. By enabling keyboard support for GridView, you can create web pages that conform to accessibility guidelines.
To enable keyboard navigation, set the KeyboardSupport property of the grid to true. This will activate the following grid features:
- Access Key - GridView can be accessed (focused) with a user-defined keyboard shortcut. This shortcut is created by combining the preset CTRL + SHIFT combination with a single character string specified via the AccessKey property. For example, setting the access key of a grid control to the string "D" indicates that an end-user can navigate to the grid by pressing CTRL + SHIFT + D.
- Focused Row - The Focused Row feature is automatically activated, regardless of the feature's property setting (SettingsBehavior.AllowFocusedRow). Focus can be moved between rows using the UP and DOWN ARROW keys. The LEFT ARROW and RIGHT ARROW keys can also be used to move row focus, but these keys initially try to collapse or expand a row. In this case, focus is only moved when it is not possible to collapse or expand a row. When focus is on the first row in a page and you press the UP ARROW or LEFT ARROW key, the previous page is displayed. When focus is on the last row in a page and you press the DOWN ARROW or RIGHT ARROW key, the next page is displayed.
- Row Selection - The SPACE key can be used to mark a focused row as selected/unselected. This works if selection can be applied to a row (if the row is not a group or detail row, the SettingsBehavior.AllowSelectByRowClick property is enabled, or the row contains a selection check box or button). Multiple rows can easily be selected by moving row focus with the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down the SHIFT key.
- Expanding/Collapsing Rows - The PLUS and MINUS keys can be used to expand and collapse group and detail rows, respectively. In addition, rows can be collapsed and expanded using the LEFT ARROW and RIGHT ARROW keys.
- Paging - The SHIFT + PAGE UP and SHIFT + PAGE DOWN key combinations can be used to go to the previous grid page and next grid page, respectively.
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos