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:

• PageCount — The total number of pages.
• ActivePageIndex — The zero-based index of the current page.
• VisibleNumericButtonCount — The maximum number of page numbers displayed simultaneously.

To set up how users navigate between the Pager's pages, use the NavigationMode property. In Auto mode, the pager switches from numeric buttons to the Go to Page input box in the following situations:

• The total number of pages is greater or equal to the SwitchToInputBoxButtonCount value. The default SwitchToInputBoxButtonCount value is 11. If you set PageCount to this value (11), the component switches to the Go to Page input box.
• The Pager is displayed on small devices. In this case, the SwitchToInputBoxButtonCount value is not taken into account.

The Pager component supports different size modes. To specify the component's size in code, use the SizeMode property.

Try the demo: use the drop-down list in the demo card's header to apply different size modes. To navigate between pages via two-way synchronization, use the Pager component or linked Spin Edit components.

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 this example, the NavigationMode property is set to PagerNavigationMode.InputBox.

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.

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.