Lazy Loading in Data grid

Question

Hi Team,We need to create a grid in our application, where we fetch records from the server.At first we get 50 records and then on scroll we should get the other 50 records which should be appended to the grid.Everytime we hit the API, it goes with different parameters, which means on every scroll we need to change the API as per our need.Also, we need server side column filtering in our grid. Could you suggest a possible way to implement this feature.

Rajapandiyan Settu · Answer

Hi Rohit, 

Thanks for contacting Syncfusion support. 
 
We have validated your query at our end. You can achieve your requirement by using remote data with InfiniteScrolling feature. 
 
Before proceeding with your query we would like to share the available Data-Adaptors in the Grid. You can choose the adaptors based on your DB. Refer to the below documentation which illustrates available data adaptors in EJ2. 

Remote-data: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#remote-data 

For each Grid data-action like Filtering, Sorting, Paging 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. Refer to the below documentation for detailed information. 

Custom-binding: https://ej2.syncfusion.com/angular/documentation/grid/observables/  

In infiniteScrolling feature, Grid request first 3 pages records from the server at initial render and it works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. In InfiniteScrolling feature the grid request next block records only if the vertical scroller reaches the bottom.  

infiniteScrolling: https://ej2.syncfusion.com/angular/documentation/grid/infinite-scroll/ 

For each time request, the actionBegin event will be triggered and here you can send additional parameters to server by using grid.query property. Please find the below code example and sample for more information. 

actionBegin: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 





[app.component.ts] 

 
  actionBegin(args) { 
    if (args.requestType == 'infiniteScroll') { 
      this.grid.query.params = []; 
// add additional parameter in grid query when adding next block of records 
      this.grid.query.addParams('ej2grid', 'true'); 
    } 
  } 
 


Sample: https://stackblitz.com/edit/angular-rdhf5g-vmopwc?file=app.component.ts  

Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Rohit Swarup · Answer

Hi Rajapandiyan,We do not want to use adaptors in our grid. We need a basic lazy loading functionality like:    if (args.requestType == 'infiniteScroll') {      let url = "../assets/json/data.json";      this.http.get(url).subscribe(res => {       this.data = this.data.concat(res['list']);      });    }We just need to append the data in our existing datasource and same is expected for filtering. I tried this approach but it is not working.Can you let us know the solution for the same.

Thiyagu Subramani · Answer

Hi Rohit, 

Thanks for your update. 

Based on your shared information we suspect that you want to add retrieved data form URL service without adaptors to the Grid when actionBegin event triggering  with args.requestType as infiniteScroll.  For this we have prepared a sample as per your requirement. Please refer to the below code and sample link. 





actionBegin(args) { 
    if (args.requestType == 'infiniteScroll') { 
      let state = { skip: 0, take: 100 }; 
      this.service.getData(state).subscribe(gridData => { 
      var result = (gridData as any).result; 
       console.log(this.data); 
      this.data = this.data.concat(result); 
      console.log(this.data); 
    }); 
    } 
  } 

Sample link: https://stackblitz.com/edit/syncfusion-angular-editable-grid-p1nyjq?file=app.component.ts 

If its not fulfill your requirement, please share below details then only we provide the appropriate solution as soon as possible. 

1 .Share your exact requirement briefly. 

2. Are you want to concat retrieved data to the Grid’s dataSource? 

3. If possible share your tired sample or explain your exact scenario in this above sample 

Please get back to us, If you need any further assistance. 

Regards, 
Thiyagu S