Problem with RadzenPager when PageChanged event handler calls async method #1851

New Issue

claunia · 2026-01-29T17:59:21Z

claunia commented

2026-01-29 17:59:21 +00:00

Originally created by @windofny1 on GitHub (Aug 30, 2025).

Hello! Thanks for Yours great product!
I find a problem with RadzenPager, here is example:

 <RadzenRow AlignItems="AlignItems.Start" JustifyContent="JustifyContent.Start" class="rz-my-2 rz-my-xs-2 rz-my-sm-2 rz-my-md-2 rz-my-lg-2 rz-my-xl-2 rz-my-xx-2">
     <RadzenColumn Size="12">
         <RadzenDataList WrapItems="true" AllowPaging="false" Data="@_users" TItem="UserTableViewResponse">
             <Template>
                 <RadzenCard class="content-panel">
                     <RadzenStack Orientation="Orientation.Vertical" Gap="5px">
                         <RadzenText TextStyle="TextStyle.Body1"><b>@context.FirstName @context.LastName </b></RadzenText>
                         <RadzenText TextStyle="TextStyle.Body2">@context.Phone</RadzenText>
                         <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                             @if (context.BlockedAt is not null)
                             {
                                 <RadzenText class="text-danger" TextStyle="TextStyle.Body2">Date block<b>@context.BlockedAt.Value.ToLocalTime()</b></RadzenText>
                                 <RadzenButton Click=@(async args =>await UnblockUser(context)) ButtonStyle="ButtonStyle.Success" class="rz-border-radius-6" >
                                     <i class="fa-solid fa-lock-open"></i>
                                 </RadzenButton>
                             }
                             @if (context.BlockedAt is null)
                             {
                                 <RadzenButton Click=@(async args =>await BlockUser(context)) ButtonStyle="ButtonStyle.Danger" class="rz-border-radius-6" >
                                     <i class="fa-solid fa-lock"></i>
                                 </RadzenButton>
                             }
                             @if (context.IsUser)
                             {
                                 <RadzenText TextStyle="TextStyle.Body2">Role:</RadzenText>
                                 <RadzenText TextStyle="TextStyle.Body2">Client</RadzenText>
                             }
                             @if (context.IsAdmin)
                             {
                                 <RadzenStack Orientation="Orientation.Horizontal">
                                     <RadzenText TextStyle="TextStyle.Body2">Role:</RadzenText>
                                     <RadzenText TextStyle="TextStyle.Body2">Admin</RadzenText>
                                 </RadzenStack>
                             }
                         </RadzenStack>
                             @if (context.IsAdmin)
                             {
                             <RadzenButton Click=@(async args =>await MakeAdminAsUser(context))   ButtonStyle="ButtonStyle.Danger" class="menu-button action small" >
                                 <i class="fa-solid fa-user fs-4 me-2"></i>Set role to Client                             </RadzenButton>
                             }
                             @if (context.IsUser)
                             {
                             <RadzenButton Click=@(async args =>await MakeUserAsAdmin(context))  ButtonStyle="ButtonStyle.Success" class="menu-button action small" >
                                 <i class="fa-solid fa-user-tie fs-4 me-2"></i>Set role to Admin                             </RadzenButton>
                             }
                     </RadzenStack>
                     
                     </RadzenCard>
                 </Template>
             </RadzenDataList>
         <RadzenPager ShowPagingSummary="true" PagingSummaryFormat="@pagingSummaryFormat" HorizontalAlign="HorizontalAlign.Right" Count="count" PageSize="@pageSize" PageNumbersCount="5" PageChanged="@PageChanged" />

          </RadzenColumn>
     </RadzenRow>

@code {
  RadzenPager radzenPager;
  string pagingSummaryFormat = "Displaying page {0} of {1} (total {2} records)";
  int pageSize  = 1;
  int count;
  private List<UserTableViewResponse> _users { get; set; } = new();
 protected override async Task OnInitializedAsync()
 {
     await base.OnInitializedAsync(); 
     await LoadData(0, pageSize);
 }
  async void PageChanged(PagerEventArgs args)
  {
      await LoadData(args.Skip, args.Top);
  }
 async Task LoadData(int skip, int take)
 {
     IsBusy = true;
     var getUsersResult = await GetUsers(skip, take);
     if (getUsersResult.IsError)
     {
         IsBusy = false;
         ShowErrorMessage(getUsersResult.FirstError.Description);
         return;
     } 
     count = getUsersResult.Value.FullRowsCount; 
     _users = getUsersResult.Value.Users.ToList(); 
     IsBusy = false; 
 }
}

So if we now try to run this example - it will work, but Pager can not show switching pages - it's always stay on first page.
At this monent as a workaround we user handler for PageChanged like this (we just run method in another thread and not wait and there we call StateHasChanged also in async manner - in sync also not work) :

 void PageChanged(PagerEventArgs args)
 {
     _ = Task.Run(async () =>
    {
        await LoadData(args.Skip, args.Top); 
        await InvokeAsync(() =>
        { 
            StateHasChanged();
        });
    });
 }

Originally created by @windofny1 on GitHub (Aug 30, 2025). Hello! Thanks for Yours great product! I find a problem with RadzenPager, here is example: ``` <RadzenRow AlignItems="AlignItems.Start" JustifyContent="JustifyContent.Start" class="rz-my-2 rz-my-xs-2 rz-my-sm-2 rz-my-md-2 rz-my-lg-2 rz-my-xl-2 rz-my-xx-2"> <RadzenColumn Size="12"> <RadzenDataList WrapItems="true" AllowPaging="false" Data="@_users" TItem="UserTableViewResponse"> <Template> <RadzenCard class="content-panel"> <RadzenStack Orientation="Orientation.Vertical" Gap="5px"> <RadzenText TextStyle="TextStyle.Body1">@context.FirstName @context.LastName </RadzenText> <RadzenText TextStyle="TextStyle.Body2">@context.Phone</RadzenText> <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center"> @if (context.BlockedAt is not null) { <RadzenText class="text-danger" TextStyle="TextStyle.Body2">Date block@context.BlockedAt.Value.ToLocalTime()</RadzenText> <RadzenButton Click=@(async args =>await UnblockUser(context)) ButtonStyle="ButtonStyle.Success" class="rz-border-radius-6" > </RadzenButton> } @if (context.BlockedAt is null) { <RadzenButton Click=@(async args =>await BlockUser(context)) ButtonStyle="ButtonStyle.Danger" class="rz-border-radius-6" > </RadzenButton> } @if (context.IsUser) { <RadzenText TextStyle="TextStyle.Body2">Role:</RadzenText> <RadzenText TextStyle="TextStyle.Body2">Client</RadzenText> } @if (context.IsAdmin) { <RadzenStack Orientation="Orientation.Horizontal"> <RadzenText TextStyle="TextStyle.Body2">Role:</RadzenText> <RadzenText TextStyle="TextStyle.Body2">Admin</RadzenText> </RadzenStack> } </RadzenStack> @if (context.IsAdmin) { <RadzenButton Click=@(async args =>await MakeAdminAsUser(context)) ButtonStyle="ButtonStyle.Danger" class="menu-button action small" > Set role to Client </RadzenButton> } @if (context.IsUser) { <RadzenButton Click=@(async args =>await MakeUserAsAdmin(context)) ButtonStyle="ButtonStyle.Success" class="menu-button action small" > Set role to Admin </RadzenButton> } </RadzenStack> </RadzenCard> </Template> </RadzenDataList> <RadzenPager ShowPagingSummary="true" PagingSummaryFormat="@pagingSummaryFormat" HorizontalAlign="HorizontalAlign.Right" Count="count" PageSize="@pageSize" PageNumbersCount="5" PageChanged="@PageChanged" /> </RadzenColumn> </RadzenRow> ``` ``` @code { RadzenPager radzenPager; string pagingSummaryFormat = "Displaying page {0} of {1} (total {2} records)"; int pageSize = 1; int count; private List<UserTableViewResponse> _users { get; set; } = new(); protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); await LoadData(0, pageSize); } async void PageChanged(PagerEventArgs args) { await LoadData(args.Skip, args.Top); } async Task LoadData(int skip, int take) { IsBusy = true; var getUsersResult = await GetUsers(skip, take); if (getUsersResult.IsError) { IsBusy = false; ShowErrorMessage(getUsersResult.FirstError.Description); return; } count = getUsersResult.Value.FullRowsCount; _users = getUsersResult.Value.Users.ToList(); IsBusy = false; } } ``` So if we now try to run this example - it will work, but Pager can not show switching pages - it's always stay on first page. At this monent as a workaround we user handler for PageChanged like this (we just run method in another thread and not wait and there we call StateHasChanged also in async manner - in sync also not work) : ``` void PageChanged(PagerEventArgs args) { _ = Task.Run(async () => { await LoadData(args.Skip, args.Top); await InvokeAsync(() => { StateHasChanged(); }); }); } ```

claunia closed this issue

2026-01-29 17:59:21 +00:00

claunia commented

2026-01-29 17:59:22 +00:00

@enchev commented on GitHub (Sep 9, 2025):

We cannot run this example since it cannot be compiled. Use our forum and for such posts and our demos to contruct runnable example demonstrating your case.

@enchev commented on GitHub (Sep 9, 2025): We cannot run this example since it cannot be compiled. Use our forum and for such posts and our demos to contruct runnable example demonstrating your case.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1851