Cursor-based pagination on DataGrid

[Yongkee Cho]

Our data API endpoint supports only cursor-based pagination (using nextCursor and pageSize), while your data adapter relies on page-based pagination (using totalCount, currentPage, and pageSize). Cursor-based pagination works well with list controls that uses a “Load More…” button instead of traditional page numbers. Do you have an example implementation of a “Load More…” feature for DataGrid or ListView?

[Prathap Senthil]

Hi Yongkee Cho,

Before proceeding with the reported requirement, we require some additional clarification from your end. Please share the below details to proceed further at our end.

• Share us the grid code snippet with model class.

• Should the new data be appended to the existing rows or replace them when “Load More…” is clicked?

• Share a simple reproducible sample with duplicate data and screenshots showing your specific UIexpectations for the “Load More…” feature.?

• Could you please share more details about your exact requirement?

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

Regards,
Prathap Senthil

[Yongkee Cho]

Thank you for your quick response and for outlining the information needed.

1. Grid code snippet & model class:
   I will prepare and share a simplified version of our DataAdapter implementation along with the model class we use for data binding.

2. Append vs. Replace:
   When the "Show Next" button is clicked, the new data should be appended to the existing rows, not replace them. The goal is to provide an infinite scroll or progressive loading experience, similar to how cursor-based pagination is typically used in APIs.

3. Sample & UI expectations:
   I will provide a minimal reproducible sample with mock data, as well as screenshots to illustrate the desired UI/UX for the “Show Next or Load More…” feature. In summary, we want the grid to display a “Load More…” button at the bottom, and upon clicking, fetch the next page using the nextCursor from the API and append the results to the grid.

4. Additional details:

   • Our backend API only supports cursor-based pagination (using nextCursor and pageSize), not page numbers or total counts.
   • We do not have access to the total record count in advance.
   • The main requirement is to integrate this cursor-based “Load More…” pattern with Syncfusion DataGrid or ListView.

Please let me know if you need any further details or if there are recommended approaches or samples for implementing this pattern with Syncfusion controls.

[Naveen Palanivel]

Hi Yongkee Cho,

Thank you for sharing the details. Based on your requirement, you want to display a “Show Next” or “Load More” button in the footer, and when clicked, the next set of records should be appended to the existing rows instead of replacing them. We would like to inform you that the Syncfusion Blazor DataGrid currently supports paging and scrolling features. With paging, you can load the next set of records by navigating through pages, and with scrolling, we provide virtualization and infinite scrolling, where data loads automatically as you scroll. However, we suspect that your requirement is combination of both which is not supported from our end.

So please refer to our Scrolling documentation for more details.

Reference : https://blazor.syncfusion.com/documentation/datagrid/infinite-scrolling
                      https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling
                      https://blazor.syncfusion.com/documentation/datagrid/performance

Regards,
Naveen.

[Yongkee Cho]

Hi Naveen,

Thank you for your explanation. I believe the main limitation is with the DataAdapter rather than the DataGrid itself. In your examples, the entire data source is loaded first and then paged for display. However, the API I am working with only supports cursor-based pagination: it returns a chunk of data along with a nextToken, and when nextToken is null, we know we’ve reached the end. We never receive the full data set or know the total count, and we cannot determine which “page” a chunk belongs to.

In this scenario, the DataAdapter typically uses Take and Skip for pagination, but with this API, we don’t have a way to use Skip since we can only fetch the next chunk using nextToken. This makes it difficult to implement traditional paging.

If you have any suggestions or workarounds for integrating cursor-based pagination with the DataGrid, I’d appreciate your guidance.

[Yongkee Cho]

What I’m looking for is a way for DataManagerRequest to include a NextToken (string or object) property that binds to the “Load More” button in the DataGrid. This would allow me to implement data retrieval in my DataAdapter like this:

public override async Task<object> ReadAsync(DataManagerRequest dataManagerRequest,string?  additionalParam=null)
{
    // ...
    if(dataManagerRequest.NextToken!=null)
    {
        var results=await ApiClient.GetResults(pageSize,dataManagerRequest.NextToken);
    }
    return results;
}

[Prathap Senthil]

Thank you for sharing your requirement. We understand that you would like to implement cursor-based pagination using a NextToken property and bind it to a “Load More” button in the DataGrid.

Currently, this functionality is not supported by the DataGrid component. The reason is that the DataGrid is designed to work with traditional paging mechanisms that rely on Skip and Take parameters and often require the total record count for paging and virtualization. In your scenario, the API provides data in chunks using a NextToken without a total count, which makes it not possible to achieve this requirement. Thank you for your understanding.