Manually setting totalRecordCount / pageCount with JS data

I am using a code base with some JS wrappers through which all of our API calls proceed. In order to work with these wrappers, I'm setting the dataSource of my grid as simply the data array returned. the wrapper component also returns the total count of records for the query. I am attempting to use this record count in the pageSettings.

Some pseudo code:

It seems that the grid is ignoring the pageSettings  values and rendering the pager only based on the dataSource results (it's showing '1 of 1 pages (2 items)')

Am I doing something wrong, or is this not a supported use case?

Hi Grant, 

Thanks for contacting Syncfusion support. 

From the query we understood that you want to perform the data binding with the result from the external api request. You can achieve this using the custom binding feature of the grid. Please go through the below link which explains data binding with result from external api result and doing CRUD operations. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding 

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding 

Regards, 

Madhu Sudhanan P 

Restating - my API interactions must get its data via a client side proxy object... the grid does not have access to the HTTP api.

I ended up working around this, and would like to explain my findings for anyone who may come up against this:

From my testing, when a pager is injected into a grid [Grid.Inject(Page)] the Grid and Pager become tied to each other... such that when the grid data source property is set, the grid will force the pager to be on page 1... if you try to then update the currentPage propety, the grid attempts to update the displayed data. I found I was ending up in a loop.

My work around is to not use Grid.Inject(Page), but to manually instatiate a Peger element and set its properties as needed.

Hi Grant, 

Sorry for the inconvenience caused. 

We have prepare the below sample to do custom binding from external request result, please find the same from the below link. 

https://stackblitz.com/edit/ts-grid-custom-binding?file=index.ts 

To handle custom binding with external data, the dataSource to the grid has to be assigned as object with result and count as property. The result holds current view data and count property should hold the total of the whole data set. 

Also for every grid action such as paging, grouping or sorting the dataStateChange event will be trigged and we need to perform the AJAX request there based on the event argument and need to assign the new set of data to the grid. 

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

https://ej2.syncfusion.com/documentation/api/grid/dataStateChangeEventArgs/#datastatechangeeventargs 

Regards, 

Madhu Sudhanan P