Pager - Overview

The Pager is a standalone UI component that enables data navigation and helps visualize the current position within a bound data source.

You can specify the following attributes:

If the total number of pages is greater than the CollapseButtonCount value, the pager hides some of the page number buttons and displays an ellipsis in their place (NumericButtons mode) or displays the Go to Page input box (Auto mode).

Try the demo below - use the pager control or linked Spin Editor controls and notice the two-way synchronization.

Pager - All Page Numbers Visible

This example demonstrates a simple scenario where the Pager control displays all its page numbers simultaneously.

Pager - Limit the Number of Page Buttons

This example sets the total number of pages to 100, but limits the number of visible buttons to 10. See how the DxPager control skips number ranges and displays ellipses instead.

Pager - Go to PageNew

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 than the CollapseButtonCount 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. If the number of pages is greater than the CollapseButtonCount value, the component displays an Ellipsis where page numbers are omitted.

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

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