Paging
By default, paging in the Grid is disabled.
Getting Started
To enable the paging functionality of the Grid, set its pageable option to true.
For paging to work properly:
- Define the number of records for the Grid to display on each page.
- Define the total number of records in the dataset.
-
Specify the
pageSizeon the data source and the field in the dataset that will contain the total number of records.$("#grid").kendoGrid({ pageable: true // Other configuration. });
Paging on the Server
To enhance the performance of the Grid, apply the paging operations on the server by setting the serverPaging option of the data source to true. When serverPaging is enabled, the data source sends the following default parameters to the server:
- The
topparameter defines the number of records to send back in the response. - The
skipparameter defines the number of records to skip from the start of the dataset.
For example, to display page 3 out of a 60-record dataset as split into ten records per page, the Grid will send skip: 20, top: 10.
The Grid works with HTTP requests which send and receive JSON payload. For example, to bind the component to a particular page of a specific data subset, instruct the dataSource to use serverPaging. As a result, it will directly use the received data. The same rule applies to the filtering, grouping, aggregation, and sorting operations.
$(document).ready(function(){
$("#grid").kendoGrid({
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
});
Configuring the Pager
By default, the Grid displays a pager even when the total amount of its data source items is less than the pageSize value.
As of the Kendo UI 2017 R3 release, the Grid enables you to toggle the visibility of its pager through the pageable.alwaysVisible configuration property. If the pageable.alwaysVisible value is false, the pager will acquire the following behavior:
- When the total number of items that is initially set in the data source is lower than the
pageSizevalue, the pager will be hidden. - When the total number of items that is initially set in the data source is greater than or equal to the
pageSizevalue, the pager will be displayed. - If after a
deleteor afilteroperation, or an update in thepageSizethe total number of items in the data source becomes lower than thepageSizevalue, the pager will be hidden. - If after an
insertor afilteroperation, or an update in thepageSizethe total number of items in the data source becomes greater than or equal to thepageSizevalue, the pager will be displayed.
For a runnable example, refer to the demo on controlling the pager visibility in the Grid.