Pager - Overview

The Pager is a standalone UI component that enables data navigation and visualizes the current position within a bound data source. You can specify the following properties to customize the Pager:

In Auto mode, the pager switches from numeric buttons to the Go to Page input box if the total number of pages is greater or equal to the SwitchToInputBoxButtonCount value.

Try the demo below - use the Pager component or linked Spin Edit components to navigate between pages using two-way synchronization.

Pager - Go to Page

Use the NavigationMode property to specify how users navigate between the Pager's pages. The following navigation modes are available:

  • Auto - If the number of pages is greater or equal to the SwitchToInputBoxButtonCount value, the component displays the Go to Page input box. Otherwise, numeric buttons are displayed.
  • InputBox - Users can type a page number in the displayed Go to Page input box to jump to the corresponding page.
  • NumericButtons - Users can click numeric buttons to navigate between pages.

In the following example, the NavigationMode property is set to PagerNavigationMode.InputBox.

Pager - All Page Numbers Visible

This example demonstrates the Pager component that displays all its page numbers simultaneously.

When all page numbers are displayed, the Pager's navigation buttons are hidden. To disable this behavior and always display navigation buttons, set the AutoHideNavButtons property to false.

Pager - Limit the Number of Page Buttons

In this demo module, the total number of pages (PageCount) is set to 100 and the number of visible numeric buttons (VisibleNumericButtonCount) is set to 7. Use the Pager component's navigation buttons to switch between pages.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙