DataGrid ReadData not handling pagination properly

[David-Moreira]

Discussed in #5115

^{Originally posted by mdmontesinos October 28, 2023}
DataGrid with ReadData mode does not handle correctly pagination.

I have a PageSize of 1, 2 elements, and I am in page 2, everything's correct:

However, when changing to a PageSize of 5, the ReadData event is not triggered so the data source is not updated from the API, even if the DataGrid does change its internal value to 5 and shows that there's no previous page.

The last console.log I get is "PageSize: 1, CurrentPage: 2", when the ReadData event should be triggered with "PageSize: 5, CurrentPage: 1".

I'm using Tailwind provider, if it's any help.

Here's the code for it (the data source is just an API with simple pagination mecanism):

<DataGrid TItem="ClinicDto"
          Data="@clinics"
          ReadData="@OnReadData"
          TotalItems="@totalClinics"
          Responsive
          ShowPager
          ShowPageSizes
          PageSizes="new[] { 1, 5, 10, 15 }"
          PagerPosition="DataGridPagerPosition.Bottom">

     <DataGridColumn Field="@nameof(ClinicDto.Name)" Caption="Nombre" Sortable="true" />
     <DataGridColumn Field="@nameof(ClinicDto.Address)" Caption="Dirección" />
     <DataGridColumn Field="@nameof(ClinicDto.PhoneNumber)" Caption="Teléfono" />
     <DataGridColumn Field="@nameof(ClinicDto.Email)" Caption="Correo electrónico" />

 </DataGrid>

@code {
    PagedList<ClinicDto>? clinics;
    int totalClinics;

    private async Task OnReadData(DataGridReadDataEventArgs<ClinicDto> e)
    {
        if (e.CancellationToken.IsCancellationRequested) return;

        Console.WriteLine($"PageSize: {e.PageSize}, CurrentPage: {e.Page}");

        var parameters = new ClinicParameters()
            {
                PageSize = e.PageSize,
                PageNumber = e.Page,
            };

        clinics = await ClinicsHttpRepository.GetClinics(parameters);
        totalClinics = clinics.MetaData.TotalCount;
    }
}
```</div>