Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

Pager (Blazor)

This article demonstrates how to use the Pager component. Check also the component guide and API reference.

Pager Properties

Name Type Default Description
Name string ‘pager’ + index suffix Unique name of the Pager.
Count integer null Number of all records.
PageSize integer 5 Number of records per page.
PageNumbersCount integer 10 Number of pager buttons.

Pager Events

Name Type Default Description
PageChanged event null Info about the current page and page size

Blazor declaration

  <RadzenDataList WrapItems="true" AllowPaging="false" Data="@orders" TItem="Order">
   <Template Context="order">
     ...
   </Template>
  </RadzenDataList>
  <RadzenPager Count="count" PageSize="@pageSize" PageNumbersCount="10" PageChanged="@PageChanged" />
  @code {
    int pageSize = 6;
    int count;
    IEnumerable<Order> orders;

    protected override void OnInitialized()
    {
        count = dbContext.Orders.Count();
        orders = GetOrders(0, pageSize);
    }

    void PageChanged(PagerEventArgs args)
    {
        orders = GetOrders(args.Skip, args.Top);
    }

    IEnumerable<Order> GetOrders(int skip, int take)
    {
        return dbContext.Orders.Include("Customer").Include("Employee").Skip(skip).Take(take).ToList();
    }
}