Infinite Scrolling to make the request before hitting the bottom - React

[Santiago Muñoz Bocanegra]

Hello Syncfusion community,

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

[Dineshnarasimman Muthu]

Hi Santiago Muñoz,

We have reviewed your query about fetching next set of records before reaching the bottom in infiniteScrolling feature. By default, in infiniteScrolling, the grid fetches next set of records when the scroller reaches the bottom.

However, this requirement can be achieved using the makeRequest() method of the infiniteScrollModule. In the dataBound event of the grid, add the custom css class to the desired row. In the scroll event which is bind to the e-content, using makeRequest() we can dynamically fetch next set of records.

The code snippet of the implementation and sample have been attached for your reference.

function makeRequest(args) {

    var infiniterequestrow = grid.element.querySelector('.infiniterequestrow');

    if (infiniterequestrow != undefined) {

      var topvalue = infiniterequestrow.offsetTop;

      if (topvalue < grid.scrollModule.previousValues.top) {

        grid.showSpinner();

        infiniterequestrow.classList.remove('infiniterequestrow');

        let rows = grid.getRows();

        let index =parseInt(rows[rows.length - 1].getAttribute('aria-rowindex'), 10) + 1;

        var prevPage = grid.pageSettings.currentPage;

        if (grid.pageSettings.currentPage == 1) {

          grid.pageSettings.currentPage = 4;

        } else {

          grid.pageSettings.currentPage = prevPage + 1;

        }

        args = {

          requestType: 'infiniteScroll',currentPage: grid.pageSettings.currentPage, prevPage: prevPage,

          startIndex: index, direction: 'down',

        };

        grid.infiniteScrollModule.makeRequest(args);

      }

    }

  }

 

 

  function dataBound(args) {

    grid.getRows()[grid.getRows().length - 20].classList.add('infiniterequestrow');

    grid.element.querySelector('.e-content') .addEventListener('scroll', function (args) {

        makeRequest(args);

      });

  }

 

 

Sample: https://stackblitz.com/edit/react-apusz7-vq4qz6?file=index.js

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman M

[Santiago Muñoz Bocanegra]

Hi Dineshnarasimman M,

Thank you for your prompt response and the detailed explanation. The code snippet and sample you provided are very helpful and seem to address my requirement effectively. I'll implement this approach in my React application.

If I encounter any issues or have further questions during the implementation, I'll be sure to reach out. I appreciate your assistance and guidance.

Best regards, Santiago Muñoz B

[Hemanthkumar S]

Hi Santiago Muñoz Bocanegra,

Sure, we will wait to hear from you.