Kendo UI for Vue Data Grid Paging Overview

Updated on Aug 14, 2026

Paging divides the Kendo UI for Vue Data Grid data into pages so users can navigate large datasets more easily. Use built-in state management for local data that the Grid can process, or use controlled paging when your application manages the paging state and processes data on the client or loads it from a remote service.

Using Built-in State Management for Paging

To enable basic numeric paging using the built-in state management mechanism, follow these steps:

1. Enable the autoProcessData prop to allow the Grid to handle paging automatically.
2. Set the pageable prop of the Grid to enable pagination.
3. Set the defaultTake prop to define the number of items rendered initially.
4. Use the defaultSkip prop to specify the number of items to be skipped initially, determining the starting page.

The following example demonstrates how to implement numeric paging using the built-in state management of the Kendo UI for Vue Grid.

Loading ...

Using Paging in Controlled Mode

Use controlled paging when the complete data set is available in the client and the application needs to manage the Grid state. To enable numeric paging in controlled mode, follow these steps:

1. Set the pageable prop of the Grid to enable paging.
2. Bind the skip prop to specify the number of records to skip before the current page.
3. Set the pageSize prop to specify the number of records per page. The take prop is an alias that is useful when your paging state uses the skip and take names, such as with the process method. Both props set the page size, so do not set them together because take takes precedence.
4. Bind the total prop to the total number of records across all pages so that the Pager calculates the available pages.
5. Handle the pagechange or datastatechange event to update the paging values or full data state.
6. Use the slice() method or the process() method to return the current page.

The following example demonstrates how to implement basic numeric paging in controlled mode.

Loading ...

Using Server-Side Paging

Server-side paging is controlled paging for remote data. Use it when loading the complete data set in the client is impractical. Handle the pagechange event, update the bound skip and take values from event.page, and request the new page from the service. Bind the returned data and total values to the Grid. The total value is required for the Pager to calculate the page count.

The following demo posts the serialized paging state to the server-operations endpoint. The service returns data for the current page and total for the full result set.

Loading ...

Configuring Pager Types

The Grid supports different pager types:

• Numeric—Renders buttons with numbers.
• Input (responsive)—Renders an input field for typing the page number.
• Custom Pager—Allows you to change entirely the Pager rendering.

The PagerSettings object has the following fields:

• buttonCount—Sets the maximum number of numeric buttons before they collapse.
• info—Toggles information about the current page and total number of records.
• type—Accepts the numeric value for numbered buttons and the input value for a page-number input.
• pageSizes—Shows a menu for selecting the page size.
• previousNext—Toggles the Previous and Next buttons.

To configure pager types, pass the PagerSettings object to the pageable prop of the Grid.

The following example demonstrates all pager types allowed in the Kendo UI for Vue Data Grid. Choose the pager type from the configuration panel above the Grid to see how each type works.

Loading ...

See Also

• Grid Overview
• Vue Data Grid High-Level Overview
• Numeric Paging
• Custom Paging