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
pageSize
on 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
top
parameter defines the number of records to send back in the response. - The
skip
parameter 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
pageSize
value, 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
pageSize
value, the pager will be displayed. - If after a
delete
or afilter
operation, or an update in thepageSize
the total number of items in the data source becomes lower than thepageSize
value, the pager will be hidden. - If after an
insert
or afilter
operation, or an update in thepageSize
the total number of items in the data source becomes greater than or equal to thepageSize
value, the pager will be displayed.
For a runnable example, refer to the demo on controlling the pager visibility in the Grid.