Does infinity scroll support dynamic `result` data from server

[aakashtechlock]

Hi, I wanted to use `SF Grid` for one of our requirement for my client (he is ready to purchase SF license if this fulfills), but wanted to check the feasibility for the same.

Requirement : Display a grid in angular application with infinity scrolling, data will be send by API in below format :

{

"next": "ab354cde", // call api with this Id to fetch next result set
"previous": "efd657rtf12", // call api with this Id to fetch pre result set
"size": 103, // can vary for each call to server
"rows" : [] // actual data

}

Explanation :

Our API service for search sends the dynamic result set what i mean by that is whenever i call the backend API it will send me the data in below format :

{

"next": "ab354cde",
"previous": "efd657rtf12",
"size": 103,
"rows" : [] // actual data

}

where `next` and ` previous` will be the identifier to fetch the next/previous result set from the server, size will send the size of current data set and the rows will contain actual data. The catch is because the API is designed on a large data set it it doesn't guaranty the fixed result `size`. Which means on API call 1 I might receive 130 records and on second call with next value I might receive 120 records and so.

Will this kind of requirements is achievable in SF grid.

[Rajapandi Ravi]

Hi Aakash, 

Greetings from syncfusion support 

 

Before proceeding with your query, we would like to share the available data-bindings in EJ2 Grid. 

 

If you are using WebAPI service or OData or SQL or any DataTable or List binding in your application, then we suggest you use Syncfusion inbuilt adaptor of DataManager to perform action on your service. 

 

You can choose the adaptors based on your Database. Refer to the below documentation which detailly illustrates available data adaptors in EJ2. 

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

WebAPI adaptor: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#web-api 

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

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/remote-data 

For each Grid data-action like Filtering, Sorting, Paging, Scrolling etc., we send the correspond query to the server based on the data-adaptors. You can execute the queries with your data and return results with required format to the Grid. 

 

If you are using any custom service, we suggest you use custom-binding feature 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

[aakashtechlock]

HI Rajapandi Ravi,

Thanks for the detailed response, our use case is little different so wanted to check feasibility first, I will try my best to explain this.

Here is our api details along with request and response:

Our API endpoint always consist the queryId 

http://localhost:4200/api/query/{queryId}

example :

http://localhost:4200/api/query/343967d18997be586df693fd0bdd962

so whenever we landed on the grid page for the first time we already have a query id to fetch the data.
once that call is made to the server, it returns the data in below format.

{

"next": "ab354cde", // call api with this Id to fetch next result set
"previous": "efd657rtf12", // call api with this Id to fetch pre result set
"size": 103, // can vary for each call to server
"rows" : [] // actual data

}

Where next/previous are the queryId's to fetch next or previous (scroll up / scroll down) data. size defines the size of current result set and can vary for each call to the server,

for example if first call made to to server with queryID : 'abcd1234' server can return below data 
 

{

"next": "ab354cde",
"previous": "efd657rtf12",
"size": 103, 
"rows" : [] // actual data

}

now if user scrolled down and a new call triggered with queryId : ` ab354cde` once reached to the bottom we can receive data as follows :

{

"next": "wervsdf23",
"previous": "cvsadwe123",
"size": 130, 
"rows" : [] // actual data

}

look here the size got changed and now we have received 130 records, and user further scroll down the size value can vary.

So our question is how can we utilize SF grid with infinity scroll along with caching for such API behavior.

[Rajapandi Ravi]

Hi Aakash,  

  

We have created a new incident under your Direct trac account to follow up with this query. We suggest you follow up with the incident for further updates. Please log in using the below link.   

  

https://www.syncfusion.com/account/login 

  

Regards,  

Rajapandi R