Pager throwing Error when changing page size

[Zachary Witt]

I'm having trouble with the SfPager component in a blazor wasm app.  When I change the page size and re-render the component, it throws an unhandled exception.  Below is a sample component.razor page that will reproduce the error:

@page
"/PagerTest"
@inheritsComponentBase
@usingSyncfusion.Blazor.Navigations
​@if(!IsLoading)
{
    <PageTitle>PagerTest</PageTitle>

    <SfPagerTotalItemsCount="100"
             PageSize="@CurrentPageSize"
             PageSizes="@(new List<int> { 5, 10, 15, 20 })"
             PageSizeChanged=@PageSizeChanged>
    </SfPager>

    <p>CurrentPageSize:@CurrentPageSize</p>
}
else
{
    <FFM.WEB.Components.LoadingComponent/>
}

@code{
    privateintCurrentPageSize=5;
    privateboolIsLoading=true;
    protectedoverrideasyncTaskOnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            IsLoading=false;
            StateHasChanged();
        }
        awaitbase.OnAfterRenderAsync(firstRender);
    }
    privateasyncTaskPageSizeChanged(PageSizeChangedArgs args)
    {
        IsLoading=true;
        StateHasChanged();

        awaitTask.Delay(2000);

        CurrentPageSize=int.Parse(args.CurrentPageSize.ToString());
        IsLoading=false;
        StateHasChanged();
    }
}

[Sanjay Kumar Suresh]

Hi Zachary Witt,

While reviewing the provided sample, we could able to reproduce the issue from our end, however we would like to inform you that we have a separate API method support to update the PageSize from our end. Which doesnot require destroying and rendering the component again so that it might be used to keep the code clean. We suggest you to modify your code as like below to achieve your requirement.

Code Snippet:

private async Task PageSizeChanged(PageSizeChangedArgs args)

{

     // IsLoading=true;

     // StateHasChanged();

 

     // await Task.Delay(2000);

 

     // IsLoading = false;

     // StateHasChanged();

 

     CurrentPageSize=int.Parse(args.CurrentPageSize.ToString());

     Pager?.UpdatePageSizeAsync(CurrentPageSize);

}

Sample: https://blazorplayground.syncfusion.com/embed/VZLyWrLLBGabyaTw?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

API Reference:

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_UpdatePageSizeAsync_System_Int32_

If you still have any concerns, feel free to get back to us. We will be happier to assist you.

Regards,

Sanjay Kumar Suresh

[Zachary Witt]

Is there a workaround to this if I do NEED to destroy and rerender the component?

[Sanjay Kumar Suresh]

Hi Zachary Witt,

While reviewing the code example you provided, we noticed that you are using the Pager component’s PageSizeChanged event handler and destroying the pager inside the event. This approach is not recommended and is the reason you are facing the reported issue.

The optimal way to achieve this requirement is by using the Pager API methods, as shared in our previous response.

If you wish to change the page size dynamically without using the API methods, you can achieve this by handling a button click and updating the value dynamically. In this scenario, the pager will work as expected.

Sample using button click: https://blazorplayground.syncfusion.com/embed/rZVyshrqyBLNnnzp?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

If you have any further concerns, please feel free to get in touch with us.

Regards,

Sanjay Kumar Suresh