Paging

The Kendo UI for Vue Native Grid enables you to split its content into pages.

Getting Started

To enable paging:

1. Set the pageable, pageSize, and skip options of the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
2. Handle the emitted onPageChange event. The onPageChange event fires when the user interacts with the Grid through the pager, then processes the data, and returns the requested page to the Grid. To implement the processing of the data programmatically, send a request to the server to execute the paging on server-side, or use the process method of the DataQuery library which automatically processes the data.

The following example demonstrates the minimum required configuration for paging the Grid records.

Pager Types

The pager types of the Grid are:

• Numeric—Renders buttons with numbers.
• Input—Renders an input field for typing the page number.

To set the pager types, pass the PagerSettings object to the pageable option of the Grid.

The PagerSettings object has the following fields:

• buttonCount—Sets the maximum numeric buttons count before the buttons are collapsed.
• info—Toggles the information about the current page and the total number of records.
• type—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.
• pageSizes—Shows a menu for selecting the page size.
• previousNext—Toggles the Previous and Next buttons.

Suggested Links

• Pager API
• API Reference of the Grid
• API Index of the Grid