New to Telerik UI for ASP.NET Core? Download free 30-day trial

Keyboard navigation

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
keyboard_navigation.cshtml
Keyboard_NavigationController.cs
EmployeeDirectoryController.cs
EmployeeDirectoryModel.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Focus

  • Alt + w focuses the widget

Actions applied on TreeList header

  • Enter sort by the column

Actions applied on TreeList data table

  • Arrow Keys to navigate over the cells
  • Space selects the row holding the currently highlighted 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 + Arrow Keys adds the row which holds the focused cell to the selection (only for selection mode "multiple")
  • Enter or F2 Puts the item in edit mode, if performed over a command column will focus the first focusable element inside it.
  • Esc Cancels the edit or returns the focus to the table if an element inside a cell is focused.
  • Alt + Right Arrow Expands the current item.
  • Alt + Left Arrow Collapses the current item.
  • Ctrl + Home Focuses the first focusable element inside the body
  • Ctrl + End Focuses the last focusable element inside the body
  • Home Focuses the first focusable cell in the row
  • End Focuses the last focusable cell in the row

Actions applied on TreeList pager

  • Tab Focuses the Pager wrapper.
  • Enter When the Pager wrapper is focused, changes the focus to the first focusable Pager element.
  • Escape When an inner Pager element is focused, changes the focus to the Pager wrapper.
  • Tab When an inner Pager element is focused, changes the focus to the next Pager element.
  • Shift + Tab When an inner Pager element is focused, changes the focus to the previous Pager element.
  • Left arrow When the Pager wrapper is focused, loads the previous page, if it exists.
  • Page up When the Pager wrapper is focused, loads the previous page, if it exists.
  • Right arrow When the Pager wrapper is focused, loads the next page, if it exists.
  • Page down When the Pager wrapper is focused, loads the next page, if it exists.
  • Home When the Pager wrapper is focused, loads the first page, if the current page is not already the first one.
  • End When the Pager wrapper is focused, loads the last page, if the current page is not already the last one.

Description

This example demonstrates the implementation of the TreeList keyboard navigation by setting the Navigatable property to true.

Support & Learning Resources