Set totalRecordsCount to EjsGrid Pagination

Question

Hi I'm trying to add pagination to EJS Grid while binding data from API.Issue:Pagination total Records is not working. The API by default returns the following JSON: counted: 4162isLastPage: falsevariantGroups: [ {thumbnail: '/images/CA2211', id: 'CA209', name: 'Earbuds', isExpired: false, price: 275, profit: 55, availability: 'available'}, {...},{...},....]Total number of results for the response.variantGroups is 10. So the pagination totalRecordCount is 10 only and not 4162. So can't paginate between the pages when I have only 10 records.HTML Code:

... ... ...

Component: @ViewChild('ejsGrid') ejsGrid: GridComponent; variantGroups; primaryVariants; pageSettings = { pageSizes:true, pageSize:10 }; pageSize = 10; page = 1; ngOnInit(): void { this.getProducts(); } getProducts() { this.http.post(`https://example.com/api/variantGroup/list`, { pageSize:10, page:1, filter: { country:'EGY', }, }).subscribe((response: any) => { this.variantGroups = response.variantGroups; this.primaryVariants = this.variantGroups.map(variantGroup=>variantGroup.primaryVariant); }); } pageChange(event) { constobj = { pageSize:this.ejsGrid.pageSettings.pageSize, page:this.ejsGrid.pageSettings.currentPage, }; if (event.requestType === 'paging') { this.pageSize = obj.pageSize; this.page = obj.page; this.getProducts(); } }Things I've tried: In the component getProducts() { this.http.post(`https://api.dev.taager.com/api/variantGroup/list`, { pageSize: 10, page: 1, filter: { country: 'EGY', }, }).subscribe((response: any) => { this.variantGroups = response.variantGroups; this.primaryVariants = this.variantGroups.map(variantGroup => variantGroup.primaryVariant); this.ejsGrid.pageSettings.totalRecordsCount = response.counted; }); }I even tried to add a static number like 300, 400 just to test but it doesn't work. What would be the ideal way to make this work?

Rajapandi Ravi · Answer

Hi Moiz, 

Greetings from Syncfusion support 

From your query we could see that you are fetching data from your custom API, So we suggest you use custom-binding feature with observables to bind the data to the Grid. We would like to share the behavior of custom-binding in EJ2 Grid. 

For every grid action(such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.  

Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in mounted. Please return the result like as “{result: […], count: …}” format to Grid. 

‘dataSourceChanged’ event is triggered when performing CRUD action in Grid. You can perform the CRUD action in your service using action details from this event and, you need to call the endEdit method to indicate the completion of save operation. 

Custom-binding: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observable-binding-using-async-pipe 

                               https://ej2.syncfusion.com/angular/documentation/grid/observables/#perform-crud-operations 

Demo:  https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe 
 
If it does not meet your requirement, please share the details about what type of API you are binding in your application. 

Regards, 
Rajapandi R