Infinite scroll event ?

[Julien Barach]

Hi,

With the infinite scroll enabled, I need to load manually more items with a request to an API when the scrollbar hits the bottom of the grid.

But I didn't find any event to catch when the scroll hits the bottom of the grid.

Could be interesting to have an event to know when the scrollbar hits the bottom, the component probably have one internally to load more items.

Regards.

[Naveen Palanivel]

Hi Julien,

We checked your query, and it seems that you want to trigger an event when the scrollbar reaches the bottom in infinite scrolling mode. We would like to inform you that the DataBound event is triggered when the new set of datasource gets loaded on the Grid. So once the scrollbar reaches the bottom in infinite scrolling, next set of records will be loaded eventually triggers DataBound event. Please refer to the following documentation for more details.

Reference : https://blazor.syncfusion.com/documentation/datagrid/events#databound

Sample : https://blazorplayground.syncfusion.com/embed/VDryXKrzTgLsMgqv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Naveen

[Julien Barach]

DataBound is not only triggered on the "load more" action.

It's also triggered if you reorder the columns or sort a column.

I need to calculate manually the "pageNumber" to send it to the API and it's not clear what's the best way to do it.

For now in my CustomAdaptor.ReadAsync event I check the DataManagerRequest (dm).

If dm.Skip == 0 my pageNumber is 1. Otherwise I increment pageNumber.

The skip and take properties are not reliable for me (due to the datagrid persistence limitations) to calculate the pageNumber. I just know that when skip is 0 this is not a "scroll reaches the bottom" event.

[Naveen Palanivel]

Hi Julien

As per your requirement, we have created a simple sample where data is added when the scrollbar reaches the bottom in the DataBound handler. During the initial render, Skip is 0, meaning the scrollbar is not at the bottom. When you scroll and reach the bottom, the Skip value changes, and based on that, we conditionally add data in the DataBound event. This approach ensures that sorting does not trigger unnecessary data loading. Please refer to the provided sample for more details.

Additionally, due to DataGrid persistence limitations, you are unable to implement certain custom loading logic. If you are still facing issues with the provided solution due to persistence, could you please share the exact difficulties you are encountering? Providing details, a video reference, or a simple sample illustrating the issue would help us better understand and assist you.

Sample : https://blazorplayground.syncfusion.com/embed/VtrytUBdxsZWxKqI?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Naveen