By default, paging is disabled and the
:pageable option is set to
To enable paging:
- Indicate the number of records for the Grid to display on each page.
- Indicate the total number of records in the dataset.
- Specify the
dataSourceand 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
true. If you use server paging, you need to handle the requests to the server and respond appropriately.
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.