Pager Component with Dropdown

14 Sep 20221 minute to read

Page size list

The Pager component provides an option to change the number of items dynamically using a dropdown list. This can be achieved by using the PageSizes property of the Pager. 

In the following sample, the selected value in a dropdown will be set to the PageSize property, and the Pager will refresh based on this new page size.

@using Syncfusion.Blazor.Navigations

<SfPager TotalItemsCount="75" PageSizes=@pagesizes PageSize="5" NumericItemsCount="3" ShowAllInPageSizes="true">
</SfPager>

@code {
    public List<int> pagesizes = new List<int> { 5, 10, 12, 20 };
}