Infinite Scrolling to make the request before hitting the bottom

Question

Hi,i want to use the infinite scrolling function of the grid angular component. Right now the InfiniteScrollingService makes the request to load the next elements only when the user have reached the bottom of the grid. I need to make the service to make that call when the user is about to reach the bottom (for example 10 or 20 rows before the bottom). Is there any way to achive my goal.kind regardsAhmad Al Edlbi

Rajapandiyan Settu · Accepted Answer

Hi Ahmad, 
 
Thanks for your update. 
 
Query #1: Is there any way that the data can be queried 10 or 20 rows before the end of the table? Maybe by manipulating the scroll-event?. 
 
Based on your requirement, you need to make the request for next set of blocks before the scroller reaches the end. We have prepared a sample with your requirement. You can achieve this by using makeRequest() method of infiniteScrollModule. 
 
In the dataBound event of Grid, we added the custom CSS Class to the 20th row from bottom and bind the scroll event to the .e-content element.  
 
In that scroll event, we dynamically make the request to get next black records when the 20th row (from bottom) reaches the top by executing makeRequest() method with corresponding arguments. 
 
Refer to the below code example and sample for more information. 
 




 
[app.component.ts] 
export class AppComponent { 
  @ViewChild("grid") 
  public grid: GridComponent; 
  public data; 
 
  ngOnInit(): void { 
    this.data = new DataManager({ 
      url: "https://services.odata.org/V4/Northwind/Northwind.svc/Orders/", 
      adaptor: new ODataV4Adaptor() 
    }); 
  } 
  makeRequest(args) { 
    var infiniterequestrow = this.grid.element.querySelector( 
      ".infiniterequestrow" 
    ); 
    if (infiniterequestrow != undefined) { 
      var topvalue = (infiniterequestrow as HTMLElement).offsetTop; 
// check if the last 20th row from bottom reaches the top 
      if (topvalue < (this.grid.scrollModule as any).previousValues.top) { 
// executed if last 20th row reaches the top  
        this.grid.showSpinner(); 
// remove the custom CSS Class 
        infiniterequestrow.classList.remove("infiniterequestrow"); 
// make the parameters to request next block records 
        let rows: Element[] = this.grid.getRows(); 
        let index: number = 
          parseInt(rows[rows.length - 1].getAttribute("aria-rowindex"), 10) + 1; 
        var prevPage = this.grid.pageSettings.currentPage; 
        if (this.grid.pageSettings.currentPage == 1) { 
          this.grid.pageSettings.currentPage = 4; 
        } else { 
          this.grid.pageSettings.currentPage = prevPage + 1; 
        } 
        args = { 
          requestType: "infiniteScroll", 
          currentPage: this.grid.pageSettings.currentPage, 
          prevPage: prevPage, 
          startIndex: index, 
          direction: "down" 
        }; 
// request the next block records by executing makeRequest method of Grid 
        (this.grid.infiniteScrollModule as any).makeRequest(args); 
      } 
    } 
  } 
  dataBound(args) { 
// add the custom class to the 20th row from bottom 
    this.grid.getRows()[this.grid.getRows().length - 20].classList.add("infiniterequestrow"); 
// add the scroll event to the grid content 
    this.grid.element.querySelector(".e-content").addEventListener( 
      "scroll", 
      function(args) { 
// call this function when scrolling the grid content  
        this.makeRequest(args); 
      }.bind(this) 
    ); 
  } 
  actionBegin(args) { 
    console.log(args); 
  } 
} 
 
 
dataBound: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound 
getRows(): https://ej2.syncfusion.com/angular/documentation/api/grid/#getrows 
currentPage: https://ej2.syncfusion.com/angular/documentation/api/grid/pageSettings/#currentpage 
 
sample: https://stackblitz.com/edit/angular-jxwem2-zjrubr?file=app.component.ts 
 
Query #2: The idea is that the user shouldn't wait long for the data to load. 
 
We can make the request to get the next set of blocks before the scroller reaches the end. But, the grid takes some time to request the records and load it into the DOM. So, we need to wait until the next set of blocks loaded into the Grid. Since this is the default behavior of infiniteScrolling feature. 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Rajapandiyan Settu · Answer

Hi Ahmad, 
 
Thanks for contacting Syncfusion support. 
 
Query: Right now the InfiniteScrollingService makes the request to load the next elements only when the user have reached the bottom of the grid. I need to make the service to make that call when the user is about to reach the bottom (for example 10 or 20 rows before the bottom). Is there any way to achive my goal. 
 
In InfiniteScrolling feature the grid fetch the next set of records  when only the scroller reached at the bottom. Since this is the default behavior of infiniteScrolling feature. The same behavior implemented in EJ2 Grid also. So, it is not possible fetch the record before reach the scroller at bottom. 
 
Please get back to us if you need further assistance with this. 
 
Regards, 
Rajapandiyan S

Ahmad Al Edlbi · Answer

Hi Rajapandiyan,Thank you for your quick response.Is there any way that the data can be queried 10 or 20 rows before the end of the table? Maybe by manipulating the scroll-event?The idea is that the user shouldn't wait long for the data to load.kind regardsAhmad Al Edlbi

Ahmad Al Edlbi · Answer

Hi Rajapandiyan,Thank you for the suggestion. I will try when I have the time and I will give you feedback.kind regardsAhmad Al Edlbi

Rajapandiyan Settu · Answer

Hi Ahmad, 
 
Thanks for your update. 
 
We will wait to hear from you. 
 
Regards, 
Rajapandiyan S

Santiago Muñoz Bocanegra · Answer

Hello Syncfusion community,

Similar to Ahmad, I've been working with the Infinite Scrolling feature in the Syncfusion Grid component for React. Currently, the InfiniteScrolling service makes the request to load the next set of elements only when the user reaches the bottom of the grid. However, I would like to enhance the user experience by triggering the service call when the user is about to reach the bottom, let's say 10 or 20 rows before.I noticed a suggestion in a similar context, but I'm wondering if there is a more direct approach to achieve this in ReactJS.Looking forward to your guidance.Best regards,
Santiago Muñoz B

Pavithra Subramaniyam · Answer

Hi Santiago Muñoz,Since the requested scenario is not our default behavior
there is no direct approach for React Grid component. As we suggested earlier,
we need to use the workaround inside the “dataBound” event. We have prepared a
sample with the React Grid component. Please refer to the below link for more
information.https://stackblitz.com/edit/react-ndndz2-prsytp?file=index.jsRegards,Pavithra S