Datagrid pager won't reload entries

[emmanouela88]

Hello,

I have a question that I am trying for some time to figure it out. I am loading my data entries from the server in a datagrid, so far so good. I am also using the paging components to have both a pager and show page sizes and here is what I am facing. When I go to the last page of my datagrid and I change the value of my page size (e.g from 5 to 10) I can't manage to load my data entry correctly on the last page for the new page size. To be more clear, in the documentation on Paging example, if we go to the last page and we increase the size, the data will re render and it will show the last page with the data and the new pages.

Do you by any chance have an idea of why this is happening?

Thank you in advance.

[stsrki]

Maybe you don't calculate page offset correctly? DataGrid pages are numbered starting from one, so if you need to make an offset in DB try to decrease paging by one. Eg. e.Page - 1.

[emmanouela88]

I have that on my Server side of the project. I have also a Read Data method to load the data on my client side and it seems that on the client is not "rendering" the new pages size.

[stsrki]

Can you share your code?

[emmanouela88]

Yeah sure,
On the server I am doing this:

 public async Task<(List<MyClass> myClass, int totalItems, int totalPages, int currentPage)> GetDataAsync(MyRequest request)
        {
            List<MyClass> itemsList = new();
            int totalItems = 0;
            int totalPages = 0;
            int currentPage = request.PageNo;

            try
            {
               using var db = _dbFactory.CreateDbContext();

                MyClass ccDto = new();

                IQueryable<MyClass> ccMyClass = db.MyClass.AsNoTracking();
....
// retrieve the specific page of data to return to the client
                itemsList = await ccMyClass 
                                    .Skip((request.PageNo - 1) * request.PageSize)
                                    .Take(request.PageSize)//when this is removed it shows all entries
                                    .ToListAsync<MyClass>();

                // calculate total items and total pages based on input page size
                totalItems = await ccMyClass.CountAsync();
                totalPages = (int)Math.Ceiling((double)totalItems / request.PageSize);
                /*(totalItems / request.PageSize) + (totalItems % request.PageSize == 0 ? 0 : 1);*/
                

                if (totalPages < request.PageNo)
                {
                    currentPage = totalPages;
                   
                }
                

            }
            catch (Exception ex)
            {
                throw;
            }

            return (myClass: itemsList, totalItems: totalItems, totalPages: totalPages, currentPage:currentPage);
        }

and on Client to read the data this is what I am doing:

private async Task OnReadData(DataGridReadDataEventArgs<MyClassDto> e)
        {
           
            // Request page X of Y count of data in a specific order (if any) and filter
            SearchItemsRequest request = new SearchItemsRequest()
            {
                PageNo = e.Page,
                PageSize = e.PageSize,
                WhereConditions = new List<DataField>(),
                OrderByConditions = new List<OrderField>()
            };

try
            {
                // NOTE: Shows the loading indicator before a time consuming action starts.
                await ShowBusyUIAsync();

                MyClassResponse<MyClassDto> response = await _ccService.GetDatasAsync(request);

                data= response.Items;
                totalItems = response.TotalItems;
                totalPages = response.TotalPages;

                if (totalPages<pageNo)
                {
                    pageNo = response.CurrentPage;
                }
                
                Console.WriteLine("PageNo "+response.CurrentPage);
                
            }
            catch (Exception ex)
            {
                
                // NOTE: Inform user of an error.
                await ShowToastAsync(
                    message: "Cannot retrieve data from the backend.",
                    color: SnackbarColor.Danger
                );
            }
            finally
            {
                // NOTE: Hides the loading indicator after the time consuming action ends.
                await HideBusyUIAsync();
            }
        }

and on the razor side on that data grid I have this:

<DataGrid TItem="MyClassDto"
                  Data="@myClass"
                  @bind-SelectedRow="@selectedDto"
                  Responsive
                  ResizeMode="TableResizeMode.Columns"
                  ShowPager
                  ShowPageSizes
                  Editable
                  Sortable
                  Filterable
                  PageSize="@pageSize"
                  CurrentPage="@pageNo"
                  TotalItems="@totalItems"
                  ReadData="OnReadData"
                  PageChanged="@OnPageChange"
                  PageSizeChanged="@OnPageSizeChange"
                  FilteredDataChanged="@OnFilterDataChange"
                  SortChanged="@OnSortChange"
                  SortMode="DataGridSortMode.Multiple"
                  PagerPosition="DataGridPagerPosition.Bottom"
                  SelectionMode="DataGridSelectionMode.Single"
                  RowSelectable="RowSelectableHandler"
                  Style="background-color:#fff"
                  HeaderThemeContrast="ThemeContrast.Light">

I hope those can help.

[emmanouela88]

So I figured out the problem, my if statement on my server side, needed to be before my query in order to get the current page correctly.