Hybrid approach on grid offline filtering, remotely fetching and updating data, problems with pagination

[Niels Van Goethem]

Dear, I currently have implemented this:
https://stackblitz.com/edit/github-oc56tl?file=src%2Fapp.component.ts

Because of the character limit, I was unable to paste all code here, so I quickly pasted in a stackblitz.

The code can be found in app.component.ts and app.component.html

What I am trying to do, and have succeeded in doing, is to remotely fetch the data, and apply filters to the data that's currently on the client, on the current page. But now I have the problem that pagination is not working.

I suspect this is because I don't pass the totalRecordsCount, but I don't know how to pass this, as this property is readonly

[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Greetings from Syncfusion support.

Upon reviewing your query, we have identified that you are experiencing an issue with pagination in the Syncfusion Grid when utilizing a hybrid data handling approach. In the Syncfusion Grid, data can be bound using either remote data using various adaptors or local data. Detailed information on remote data binding is available in our documentation, which you can refer using the links below.

After examining the provided code example, it appears that you are combining custom data binding with the RemoteSaveAdaptor. It is important to note that when using RemoteSaveAdaptor, the entire dataset should be assigned to the json property of the DataManager. Data operations such as filtering, sorting, and paging should be executed on the client side, while CRUD operations are managed on the server side. In contrast, other adaptors handle all actions solely on the server side. The custom binding approach requires data in the format of an object containing result and count, whereas the RemoteSaveAdaptor expects the entire dataset as a JSON property. Therefore, we could not combine these two features.

Additionally, in the Syncfusion Angular Grid, you have the flexibility to use custom data binding with observables. This allows you to employ any custom services, returning data in the format of an object containing both result and count. You can then use 'dataStateChange' for handling data actions and 'dataSourceChanged' for managing CRUD actions.

Documentation Links:

Custom Binding

RemoteSaveAdaptor

UrlAdaptor

ODatav4Adaptor

WebApiAdaptor

GraphQLAdaptor

WebMethodAdaptor

Regards

Aishwarya R