Infinite Scrolling to make the request before hitting the bottom

[Ahmad Al Edlbi]

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 regards

Ahmad Al Edlbi

[Rajapandiyan Settu]

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]

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 regards

Ahmad Al Edlbi

[Rajapandiyan Settu]

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 20^th 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 20^th 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 20^th row from bottom reaches the top 

      if (topvalue < (this.grid.scrollModule as any).previousValues.top) { 

// executed if last 20^th 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 20^th 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 

[Ahmad Al Edlbi]

Hi Rajapandiyan,

Thank you for the suggestion. I will try when I have the time and I will give you feedback.

kind regards

Ahmad Al Edlbi

[Rajapandiyan Settu]

Hi Ahmad, 

 

Thanks for your update. 

 

We will wait to hear from you. 

 

Regards, 

Rajapandiyan S 

[Santiago Muñoz Bocanegra]

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]

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.js

Regards,

Pavithra S