Data Grid Event on Page switch

[Peter Linecker]

Hi Syncfusion Team,

In my Grid I want to load the data according to the page for performance reasons. For example my page size is 20 and I am on page 2, so I want to send a http request to my api which skips 20 elements and loads the next 20 elements.

According to this Thread https://www.syncfusion.com/forums/146170/not-able-to-fetch-the-page-number-and-size-of-the-grid-for-the-server-side-pagination-in I can get the number of the page with this.grid.pagerModule.pagerObj.currentPage;

I wonder if there is an event for switching pages, so I can send this new http request?

Thank you.

[Sujith Kumar Rajkumar]

Hi Peter, 

 

Greetings from Syncfusion support. 

 

You can use the Grid’s actionBegin event(triggers on performing page and other Grid actions) to handle your required actions. 

 

API: https://ej2.syncfusion.com/documentation/api/grid/#actionbegin 

 

However, based on the query we could see that your requirement is to perform server side paging action for retrieving the Grid data. For this case we suggest you to use the custom binding support available with the Grid to achieve the same. We have explained this in detail below, 

 

Custom binding: 

 

If you are using the API calls to perform Grid action from the server, 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(Search, 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 Searching, 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 can be checked in the below help documentation link, 

 

Custom binding documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observables  

 

Online demo sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe  

 

API links: https://ej2.syncfusion.com/documentation/api/grid/#datastatechange 

                 https://ej2.syncfusion.com/documentation/api/grid/#datasourcechanged 

                 https://ej2.syncfusion.com/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. 

 

However if you need to access the data from your database through server controller methods then we suggest you to use the remote data adaptors for it. We have explained this below, 

 

Remote data binding: 

 

The EJ2 Grid supports the following adaptors to communicate with the data source in the back-end – Json, URL, OData, ODataV4, Remote Save, Web API and WebMethod adaptor. Each adaptor uses a different way to send and receive requests and response from remote services. They are explained in the below documentation link which you can check for more details, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#remote-data  

 

URL adaptor: https://ej2.syncfusion.com/angular/documentation/grid/edit/#url-adaptor 

 

You can use the adaptor which best suits your requirement for binding data and performing grid actions(Search, Sort, Page, Filter, etc. ) from the server. 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Peter Linecker]

Hello,

Thanks for the quick answer which solved my problem.

Kind Regards,

Peter

[Sujith Kumar Rajkumar]

Hi Peter, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 

Sujith R