The Kendo UI Grid wrapper for Vue is platform-agnostic—it works with HTTP requests to send and receive JSON payload.
To configure the paging functionality of the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.
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.
By default, paging is disabled and the
:pageable option is set to
false. 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.
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, to show the third page out of a 60-record dataset and you split the data into 10 records per page, the Kendo UI Data Grid wrapper for Vue will send
skip: 20, top: 10.
If all Kendo UI Grid wrapper for Vue items fit into a single page, you do not have to display the pager. The Grid toggles the pager visibility by using the
pageable-always-visible configuration property. By default, the Grid shows the pager even when the total number of items in the DataSource is less than the
value is set to
false, the behavior of the Grid is the following:
- When the total number of items which are initially set in the DataSource is less than the
pageSizenumber, the pager will be hidden.
- When the total number of items which are initially set in the DataSource is greater than or equal to the
pageSizenumber, the pager will be displayed.
- When the total number of items in the DataSource becomes smaller than the
pageSizenumber (after delete or filter operations, or a
pageSizechange), the pager will be hidden.
- When the total number of items in the DataSource becomes greater than or equal to the
pageSizenumber (after an insert or filter operations, or a
pageSizechange), the pager will be displayed.