Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Pagination is not working properly in Blazor FluentDataGrid

$
0
0

I am trying to display data using FluentDataGrid but I am getting very strange behavior.Issues:

  1. The total item count of the grid is not updated properly. That is why pagination buttons are not working.
  2. I somehow manage to set the total items count, but then when I change the page, the event always gets 0 as page number.

Here is my code. I am using @rendermode = InteractiveAssembly.

@rendermode InteractiveWebAssembly@inject HttpClientService httpClientService<FluentDataGrid Items="RolesData?.Data?.AsQueryable()"                TGridItem="GetRoles.Response"                Pagination="paginationState"                ShowHover="true"                MultiLine="true"                Loading="@gridLoader"><PropertyColumn Property="@(c => c.Name)" Sortable="false" /><TemplateColumn Title="Permissions"><p>@context.PermissionCount permissions assigned</p></TemplateColumn><TemplateColumn Title="Assigned To"><p>@context.AssignedTo uers</p></TemplateColumn><TemplateColumn Title="Actions">        @if (context.IsPrimary == false)        {<FluentButton aria-label="Edit item" IconEnd="@(new Icons.Regular.Size16.Edit())" OnClick="() => OnEditClick(context.Id)" /><FluentButton aria-label="Delete item" IconEnd="@(new Icons.Regular.Size16.Delete())" OnClick="() => OnDeleteClick(context.Id)" />        }</TemplateColumn></FluentDataGrid><FluentPaginator State="@paginationState" CurrentPageIndexChanged="OnCurrentPageIndexChanged" />

That is my component. I am fetching data on OnAfterRenderAsync initially

private GetRoles.Request request = new GetRoles.Request();private Pagination.Response<IEnumerable<GetRoles.Response>>? RolesData;PaginationState paginationState = new PaginationState { ItemsPerPage = 10 };bool gridLoader;protected override async Task OnAfterRenderAsync(bool firstRender){    if (firstRender)    {        await GetRoles();    }}private async Task GetRoles(){    gridLoader = true;    StateHasChanged();    request.Page = paginationState.CurrentPageIndex;    request.PageSize = paginationState.ItemsPerPage;    var roleDataResponse = await httpClientService.GetAsync<Pagination.Response<IEnumerable<GetRoles.Response>>>("/api/roles", request);    if (roleDataResponse != null)    {        RolesData = roleDataResponse;        await paginationState.SetTotalItemCountAsync(roleDataResponse.TotalRecords);    }    gridLoader = false;    StateHasChanged();    Console.WriteLine($"CurrentPageIndex: {paginationState.CurrentPageIndex}");    Console.WriteLine($"LastPageIndex: {paginationState.LastPageIndex}");    Console.WriteLine($"TotalItemCount: {paginationState.TotalItemCount}");}

The event which is handling the button click on the pagination is

async void OnCurrentPageIndexChanged(int index){    await paginationState.SetCurrentPageIndexAsync(index);    await GetRoles();}

This is the data returned by the API

{"totalRecords": 11,"data": [        {"id": "Dy9dkGzW","name": "Test 9","permissionCount": 2,"assignedTo": 0,"isPrimary": false        },        {"id": "eV9ablPg","name": "Test 8","permissionCount": 2,"assignedTo": 0,"isPrimary": false        },        {"id": "X892olBV","name": "Test 7","permissionCount": 10,"assignedTo": 0,"isPrimary": false        },        {"id": "8e7V896p","name": "Test 6","permissionCount": 1,"assignedTo": 0,"isPrimary": false        },        {"id": "1VGx2l5Q","name": "Test 5","permissionCount": 4,"assignedTo": 0,"isPrimary": false        },        {"id": "5Y7Qq7Bk","name": "Test 4","permissionCount": 9,"assignedTo": 0,"isPrimary": false        },        {"id": "O8l1wGqx","name": "Test 3","permissionCount": 2,"assignedTo": 0,"isPrimary": false        },        {"id": "Y8Gb39Bq","name": "Test 2","permissionCount": 3,"assignedTo": 0,"isPrimary": false        },        {"id": "QY7BV7OV","name": "Test 1","permissionCount": 2,"assignedTo": 0,"isPrimary": false        },        {"id": "ZYG8o71v","name": "Finance","permissionCount": 8,"assignedTo": 0,"isPrimary": false        }    ]}

As you can see the 'totalRecords' are 11 here. The pagination should show total records as 11 and it should have 2 pages, but it is showing me thisenter image description here

If I move 'await paginationState.SetTotalItemCountAsync(roleDataResponse.TotalRecords);' to the end of the method, it sets the total items count correctly and the pagination buttons are not disabled, but when I click on the next button, the event handler get 0 in 'index'.

Am I missing something here or doing something really wrong?Any help will be appreciated.

Thank you in advance.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>