Grid pagination on demand

Question

Hello!I've been looking the samples and documentation and still can't figure out how to paginate my grid on demand. I mean, i need to retrieve data rows from 1-15 in a initial state, and after the user clicks the next button or any page number, then retrieve the data rows from 15-30 or data from that page. I'm getting the data from an API through axios in my front, with all the meta information (per_page, total...etc). I don't want to populate the table with the whole data at once because that is so heavy, just need to retrieve the data and populate the table every time the user clicks in the next button as i said.Is there a simple way to do that without using the adaptors?Thank you.

Sujith Kumar Rajkumar · Answer

Hi David, 
 
Greetings from Syncfusion support. 
 
For your requirement of handling the Grid pagination on demand without using adaptors, we suggest you to use custom binding approach available with the Grid. So, if you are using the API calls to perform Grid action from the service, then we suggest you to custom binding approach to bind data in the Grid. With this you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it. The Grid’s custom binding approach is explained below, 
 
For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. 
 
More details on custom binding with online demo sample can be checked in the below links, 
 
Custom binding documentation: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/data-binding/#custom-binding 
 
Online demo sample: https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html 
 
API: https://ej2.syncfusion.com/vue/documentation/api/grid/#datastatechange 
                  https://ej2.syncfusion.com/vue/documentation/api/grid/#datasourcechanged 
                  https://ej2.syncfusion.com/vue/documentation/api/grid/#datasource 
 
Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R