Server side pagination using grid and blazor

Hello,

I would like to apply server-side pagination and display data in a grid. I am using Blazor and data is being fetched via an api request.

Already implemented:

Each api request brings a "requestResponse" which will contain "totalPages" and the "data" (the records). The "totalPages" is calculated on the server side based on the total number of records and page size. The page size is always 50 in this case. So e.g. if there are 400 records in a collection, the request will fetch: "totalPages" = 8, data = 50 records.

What I want to achieve: 

The final result should be a grid which is pageable. The grid should display number of pages equal to the "totalPages" from the api response. Each click on a page should trigger another api request (ideally fire an event that calls a method that takes as an argument the page number).

I saw documentation about OnRead event: https://docs.telerik.com/blazor-ui/components/grid/manual-operations but I couldn't make it work as when the component is initialized, the event doesn't fire. I cannot fire it within OnInitializedAsync() as I would need to pass GridReadEventArgs to the event and that is not possible in OnInitializedAsync() when the component is first initialized. If I'm not using GridReadEventArgs  as argument, then how would the grid know the "totalPages"?

Am I going in the right direction with OnRead? Is there another way, perhaps trigger the api within a PageChanged event? Then how would I be able to set the desired number of pages?

Any help would be appreciated.

Thank you.

Kind regards,

Astig