|
| 1 | +--- |
| 2 | +title: Keyboard Navigation |
| 3 | +page_title: jQuery PropertyGrid Documentation - Keyboard Navigation |
| 4 | +description: "Get started with the jQuery PropertyGrid by Kendo UI and learn about the accessibility support it provides through its keyboard navigation functionality." |
| 5 | +slug: keynav_propertygrid_jquery |
| 6 | +position: 2 |
| 7 | +--- |
| 8 | + |
| 9 | +# Keyboard Navigation |
| 10 | + |
| 11 | +The PropertyGrid gets its keyboard navigation functionality through the `navigatable` option. When set to `true`, you can initially select a row or cell and then move within the PropertyGrid by using the `Arrow` keys. |
| 12 | + |
| 13 | +The Kendo UI for jQuery PropertyGrid supports the following keyboard shortcuts applied to the PropertyGrid Data Table: |
| 14 | + |
| 15 | +| SHORTCUT | DESCRIPTION | |
| 16 | +|:--- |:--- | |
| 17 | +| `Arrow keys` | Navigate over the cells| |
| 18 | +| `Space` | Selects the row holding the currently highlighted cell| |
| 19 | +| `Enter` or `F2` | Puts the item in the edit mode| |
| 20 | +| `Esc` | Cancels the edit or, if an element inside a cell is focused, returns the focus to the table| |
| 21 | +| `Ctrl`+`Home` | Focuses the first focusable element inside the body| |
| 22 | +| `Ctrl`+`End` | Focuses the last focusable element inside the body| |
| 23 | +| `Home` | Focuses the first focusable cell in the row| |
| 24 | +| `End` | Focuses the last focusable cell in the row| |
| 25 | +| `Shift`+`Tab` | Navigates to the previous item| |
| 26 | +| `Shift`+`Tab` | Navigates to the previous item| |
| 27 | +| `Shift`+`Tab` | Navigates to the previous item| |
| 28 | + |
| 29 | +The Kendo UI for jQuery supports the following keyboard shortcuts applied to the PropertyGrid ToolBar: |
| 30 | + |
| 31 | +| SHORTCUT | DESCRIPTION | |
| 32 | +|:--- |:--- | |
| 33 | +| `F10` | Focuses the ToolBar| |
| 34 | +| `Right Arrow` | Focuses the next focusable item| |
| 35 | +| `Left Arrow` | Focuses the previous focusable item| |
| 36 | +| `Enter` | Selects the focused button, or enters the inner template navigation if the template contains focusable items, or opens CommandOverflow menu when overflow anchor is focused| |
| 37 | +| `Space` | Selects the focused button| |
| 38 | +| `Home` | Focuses the first focusable item| |
| 39 | +| `End` | Focuses the last focusable item| |
| 40 | +| `Esc` | Moves the focus back to the PropertyGrid ToolBar item| |
| 41 | + |
| 42 | +For a complete example, refer to the [demo on keyboard navigation of the PropertyGrid](https://demos.telerik.com/kendo-ui/propertygrid/keyboard-navigation). |
| 43 | + |
| 44 | +## See Also |
| 45 | + |
| 46 | +* [Keyboard Navigation by the PropertyGrid (Demo)](https://demos.telerik.com/kendo-ui/propertygrid/keyboard-navigation) |
| 47 | +* [Keyboard Support in Kendo UI for jQuery]({% slug keyboard_shortcuts_accessibility_support %}) |
| 48 | +* [Accessibility in the PropertyGrid]({% slug accessibility_kendoui_propertygrid %}) |
0 commit comments