I am trying to display data using FluentDataGrid but I am getting very strange behavior.Issues:
- The total item count of the grid is not updated properly. That is why pagination buttons are not working.
- 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 this
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.