All Components

Paging

By default, paging is disabled and the :pageable option is set to false.

To enable paging:

  1. Set pageable to true.
  2. Indicate the number of records for the Grid to display on each page.
  3. Indicate the total number of records in the dataset.
  4. Specify the pageSize on the dataSource and the field in the dataset that will contain the total count of records.
<kendo-grid :pageable='true'
</kendo-grid>

To avoid including too much data in the HTML, which might slow down page performance, do the paging operations on the server by setting the serverPaging option on the dataSource to true. If you use server paging, you need to handle the requests to the server and respond appropriately.

When serverPaging is enabled, the dataSource sends the following default parameters to the server:

  • top—Defines the number of records to send back in the response.
  • skip—Defines the number of records to skip from the start of the dataset.

For example, if you want to show the third page out of a 60-record dataset and you split the data into 10 records per page, the Grid will send skip: 20, top: 10.

In general, the Grid is platform-agnostic. This means that it works with HTTP requests to send and receive JSON payload. For example, to bind the component to a specific data subset (only to a particular page), instruct the dataSource to use serverPaging. In this way, it will directly use the received data. The same rule applies to the filtering, grouping, aggregation, and sorting operations.

For more information on paging, refer to the documentation of the Kendo UI Grid for jQuery.

In this article