The native Vue Grid by Kendo UI enables you to split its content into pages.
To enable paging:
- Set the
skipoptions of the Grid. As a result, the Grid renders a paging UI navigation to the bottom of the Grid and enhances user interaction.
- Handle the emitted
onPageChangeevent 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
processmethod of the
DataQuerylibrary which automatically processes the data.
The following example demonstrates the minimum required configuration for paging the Grid records.
The pager types of the Grid are:
- Numeric—Renders buttons with numbers.
- Input—Renders an input field for typing the page number.
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.
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.