How to implement pagination in SfGrid

[Maxim Mihaluk]

Hi to All.

I like SfGrid component but I cannot implement "smart" pagination on it.

For example, I have 1000 records in a database. If I set datasource and fetch all records on init page pagination works fine but it takes too long to fetch data.

I want to fetch the first 100 records on init and show them and then when the user clicks the next button fetch the next 100 records and show them and so on.

I tried to use CustomAdapter as described in the article but it doesn't work.

I injected DataService in the CustomAdapter. DataService fetches data from WebApi (I also tried fake TestService which just returns an inlined list of data). When DataService fetches data the app fails.

So does anybody have a working example of using CustomAdapter to implement pagination?

Thanks in advance.

[Naveen Palanivel]

Hi Maxim Mihaluk,

Greetings from Syncfusion support,

We have created a simple sample based on your requirements to demonstrate how to inject a data service into a CustomAdaptor to fetch 100 records per page. When navigating to the next page, it fetches the next 100 records. In our testing, we did not encounter any issues. Please refer to the attached sample for your reference.

Note: After connecting the database we need to copy the path of the database and change the connection string with the copied path in OrderContext,.cs file based on the NORTHWND.MDF file in APP_Data folder.

We would also like to inform you that, apart from the CustomAdaptor, we support other adaptors like Web API and ODataV4 to bind data on demand. You can refer to the documentation below for more information:

Documentation ;https://blazor.syncfusion.com/documentation/datagrid/data-binding#web-api

                            https://blazor.syncfusion.com/documentation/datagrid/data-binding#binding-with-odata-v4-services

                            https://blazor.syncfusion.com/documentation/datagrid/custom-binding

If the reported issue still reproduced, then kindly share the below details to validate further at our end.

1. Share us the full Grid code snippet and model class.
2. Please set the ActionFailure event in the Grid and share the details from the event arguments if any errors are logged.
3. Share us the video demonstration of the issue with elaborately, it will be more useful to us.
4. Share us a simple issue replicating sample or try to modify the above-mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,
Naveen

Attachment: BlazorApp1_c1d130b3.zip