• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Keyboard Navigation

By default, the keyboard navigation of the KendoReact Pager is disabled. To enable keyboard navigation, set the navigatable attribute to true.

The Pager supports the following keyboard shortcuts:

For all scenarios:

SHORTCUTDESCRIPTION
HomeLoads the first page of data.
EndLoads the last page of data.

When the wrapper is focused:

SHORTCUTDESCRIPTION
EnterActivates inner Pager navigation.
TabMoves the focus to the next focusable element on the page.
Shift & TabMoves the focus to the previous focusable element on the page.
Left ArrowLoads the previous page of data.
Right ArrowLoads the next page of data.
Page UpLoads the previous page of data.
Page DownLoads the next page of data.

When inner navigation is activated:

SHORTCUTDESCRIPTION
EscapeMoves focus back to wrapper element. Deactivates inner Pager navigation.
TabMoves the focus to the next focusable element in the Pager. If current focus is on the last element, moves focus to the first focusable item in the component.
Shift & TabMoves the focus to the previous focusable element in the Pager. If current focus is on the first element, moves focus to the last focusable item in the component.
EnterExecutes the currently focused element action.
Example
View Source
Change Theme:

In this article

Not finding the help you need?