Introducing the New Blazor Pager Component
Tags: csharp, dotnet, blazor, webdev
Published: 2022-08-03 12:37:49

---
title: Introducing the New Blazor Pager Component
published: true
date: 2022-08-02 12:11:21 UTC
tags: csharp, dotnet, blazor, webdev
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-blazor-pager-component.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Introducing-the-New-Blazor-Pager-Component-672x372.png
---

We are happy to introduce the new Syncfusion [Blazor Pager](https://www.syncfusion.com/blazor-components/blazor-pager "Blazor Pager") component in our [2022 Volume 2 release](https://www.syncfusion.com/forums/175975/essential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-download "Essential Studio 2022 Volume 2 release"). It is one of the most-awaited and upvoted components in our [feedback portal](https://www.syncfusion.com/feedback/18148/standalone-pager-component-in-blazor "Syncfusion Feedback Portal").

Let’s explore the features of the new Blazor Pager component and its UI design with code examples.

## Blazor Pager: Overview

The Blazor Pager component is a completely responsive and customizable control. It can easily split data sets into pages and enable us to view them through an intuitive UI.

You can configure the look and feel of the Pager using several built-in options. The component supports standard functionalities like accessibility, keyboard interactions, and events. It also comes with industry-standard themes such as Material, Fabric, and Bootstrap.

### Ease of use

Every user prefers to render a component and enable their required functionalities with minimal configuration. We developed our Blazor Pager component to render and enable features with minimal property declaration and configuration.

From the API name itself, you can easily understand the usage of the property. For more details, check out the [Getting Started with Blazor Pager documentation](https://blazor.syncfusion.com/documentation/pager/getting-started "Getting Started with Blazor Pager documentation").

## Key features

The key features of the new Blazor Pager component are as follows:

- [Dropdown to choose the page size](#dropdown-to-choose-the-page-size)
- [Template](#template)
- [Responsive layout](#responsive-layout)
- [Web standards](#web-standards)
- [Globalization](#globalization)
- [Themes](#themes)

### Dropdown to choose the page size

The Pager lets you show different page sizes as a list in the pager dropdown, which helps us dynamically change the page size. You can also change the page size of the Pager by setting the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html?#Syncfusion_Blazor_Navigations_SfPager_PageSizes "PageSizes property of Blazor Pager component") property.

Refer to the following image.

![Page Size Dropdown in Blazor Pager Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Page-Size-Dropdown-in-Blazor-Pager-Component.png)
<figcaption>Page Size Dropdown in Blazor Pager Component</figcaption>

### Template

You can customize the appearance of the entire Pager UI with HTML elements or other components using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html?#Syncfusion_Blazor_Navigations_SfPager_Template "Template property of Blazor Pager") property.

Refer to the following GIF image.

![Customizing the Blazor Pager Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Customizing-the-Blazor-Pager-Component.gif)
<figcaption>Customizing the Blazor Pager Component</figcaption>

### Responsive layout

The Blazor Pager component acts intelligently and changes its UI responsively based on the pager dimensions. Its optimized design provides the best UI interaction on different devices.

While resizing the browser window, the elements in the Pager component will adjust automatically. The beauty is: there is no need for any specific property support to enable this feature in the Pager.

Refer to the following image.

![Blazor Pager Component’s Responsive UI Layout](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Blazor-Pager-Component%E2%80%99s-Responsive-UI-Layout.png)
<figcaption>Blazor Pager Component’s Responsive UI Layout</figcaption>

### Web standards

Web accessibility is a major and essential requirement for any application. An app should be readable and understandable even for users with disabilities. We have developed our Blazor Pager with complete web accessibility support to satisfy this essential need.

Accessibility is achieved in the Blazor Pager component through the WAI-ARIA standard and keyboard navigation:

- [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/ "ARIA Authoring Practices Guide"): The Pager component’s UI includes high-contrast visual elements that help users with low vision enjoy the best viewing experience. The Pager component’s features are easily accessed through assistive technologies such as screen readers.  
The following ARIA attributes are used in the Blazor Pager component:
  - pager (role)
  - link (role)
  - aria-label (attribute)
  - aria-selected (attribute)

- **Keyboard navigation** : Ensures that every cell is keyboard-accessible. You can even perform the major functions like navigation using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible apps using this component.  
The Blazor Pager component supports the following keyboard shortcuts:

<table>
<tbody>
<tr>
<td><strong>Interaction Keys</strong></td>
<td><strong>Description</strong></td>
</tr>
<tr>
<td>Page down/Right arrow</td>
<td>Navigates to the next page.</td>
</tr>
<tr>
<td>Page up/Left arrow</td>
<td>Navigates to the previous page.</td>
</tr>
<tr>
<td>Enter/Space</td>
<td>Select the page currently in focus.</td>
</tr>
<tr>
<td>Tab</td>
<td>Focus on the next pager item.</td>
</tr>
<tr>
<td>Shift + Tab</td>
<td>Focus on the previous pager item.</td>
</tr>
<tr>
<td>Home</td>
<td>Navigates to the first page.</td>
</tr>
<tr>
<td>End</td>
<td>Navigates to the last page.</td>
</tr>
<tr>
<td>Alt + Page up</td>
<td>Navigates to the previous pager.</td>
</tr>
<tr>
<td>Alt + Page down</td>
<td>Navigates to the next pager.</td>
</tr>
</tbody>
</table>

### Globalization

This feature allows the Blazor Pager component to function globally, thus meeting the diverse needs of different regions.

RTL rendering displays the text and layout from the right-to-left direction. This improves the user experience and accessibility for RTL languages like Hebrew, Arabic, and Persian.

You can localize all the strings used in the Pager component’s UI. The [localization](https://blazor.syncfusion.com/documentation/common/localization "Localization of Syncfusion Blazor Components") (l10n) library is used to localize the UI strings.

### Themes

Themes provide an elegant look and feel to an app.  The Blazor Pager component supports several built-in SASS-based themes: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast. You can also easily customize the themes by overriding the existing SASS styling.

## Integrating the Pager and ListView components

We can integrate the Blazor Pager component with all data-binding components, such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid"), [Card](https://www.syncfusion.com/blazor-components/blazor-card "Blazor Card"), and [ListView](https://www.syncfusion.com/blazor-components/blazor-listview "Blazor ListView").

Let’s see how to integrate the Blazor Pager component with the [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started "Getting Started with Blazor ListView Component") component.

You can split the ListView component’s data set into sectioned pages and view them page by page. Navigation can be done with the built-in numeric elements and buttons available.

1. First, render the Blazor ListView component. Refer to this [documentation](https://blazor.syncfusion.com/documentation/listview/getting-started "Getting Started with Blazor ListView Component") for more details regarding how to define this component.
```html
<SfListView DataSource="@ListData" TValue="DataModel" HeaderTitle="Contacts" Height="355px" ShowHeader="true">
   <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
</SfListView>
 
@code {
 
   // Initialize the list.
   List<DataModel> ListData = new List<DataModel>();
   protected override void OnInitialized()
   {
     base.OnInitialized();
     ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
     ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany"});
     ListData.Add(new DataModel { Name = "Janet, London, Brazil"});
     ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium"});
     ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland"});
     ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela");
     ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria"});
     ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico"});
     ListData.Add(new DataModel { Name = "Albert, Kirkland, USA"});
     ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
     ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland");
     ListData.Add(new DataModel { Name = "Carter, Madrid, Italy"});
     ListData.Add(new DataModel { Name = "Allison, Marseille, Spain"});
     ListData.Add(new DataModel { Name = "John, Tsawassen, UK"});
     ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
     ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
     ListData.Add(new DataModel { Name = "Kelsey, London, Canada"});
     ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark"});
     ListData.Add(new DataModel { Name = "Robert, Berlin, Austria"});
     ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland"});
     ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway"});
     ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina"});
     ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland"});
     ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden"});
     ListData.Add(new DataModel { Name = "Nolan, London, UK"});
     ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy"});
   }
   public class DataModel
   {
     public string Name { get; set; }
     public string Id { get; set; }
   }
}
```

From the previous code, you can see that the entire data source is bound to the ListView component. In the following steps, we will learn how to limit the rendering of data in the ListView using the Pager component.

2. Now, render the Blazor Pager component. Refer to this [documentation ](https://blazor.syncfusion.com/documentation/pager/getting-started "Getting Started with Blazor Pager Component")for more details regarding how to define this component.
```html
<SfPager PageSize=5 NumericItemsCount=2 TotalItemsCount=25 >
</SfPager>
```
3. Then, limit the rendering of data during the initial rendering time of the ListView component based on the [PageSize](https://blazor.syncfusion.com/documentation/pager/behaviour-settings#page-size "Page Size") defined in the Pager component. Refer to the following code example.
```html
<div class="control-container">
  @{
      // Process and bind current page data to the ListView component instead of binding the entire data.
      var listData = ListData.Skip(Skip).Take(Take).ToList();
 
     <SfListView DataSource="@listData" TValue="DataModel" HeaderTitle="Contacts" Height="355px" ShowHeader="true">
       <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
     </SfListView>
   }
   <div class="pager-container">
     <SfPager PageSize=5 NumericItemsCount=2 TotalItemsCount=25>
     </SfPager>
   </div>
</div>
 
@code {
 
   public int SkipValue ;
   public int TakeValue = 5; // It refers the PageSize value of Pager component
   // Initialized the list.
   List<DataModel> ListData = new List<DataModel>();
   protected override void OnInitialized()
   {
     base.OnInitialized();
     ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
     ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany"});
     ListData.Add(new DataModel { Name = "Janet, London, Brazil"});
     ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium"});
     ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland"});
     ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela");
     ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria"});
     ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico"});
     ListData.Add(new DataModel { Name = "Albert, Kirkland, USA"});
     ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
     ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland");
     ListData.Add(new DataModel { Name = "Carter, Madrid, Italy"});
     ListData.Add(new DataModel { Name = "Allison, Marseille, Spain"});
     ListData.Add(new DataModel { Name = "John, Tsawassen, UK"});
     ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
     ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
     ListData.Add(new DataModel { Name = "Kelsey, London, Canada"});
     ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark"});
     ListData.Add(new DataModel { Name = "Robert, Berlin, Austria"});
     ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland"});
     ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway"});
     ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina"});
     ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland"});
     ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden"});
     ListData.Add(new DataModel { Name = "Nolan, London, UK"});
     ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy"});
   }
   public class DataModel
   {
     public string Name { get; set; }
     public string Id { get; set; }
   }
}
<style>
  .e-listview , .pager-container {
     max-width: 460px;
  }
</style>
```
4. Now, we need to bind the data in the ListView component while navigating the pages in the Pager component. While navigating the numeric items in the Pager, the [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html?&_ga=2.10879475.65403643.1658121720-1964677263.1614851411#Syncfusion_Blazor_Navigations_SfPager_Click "Click event of the Blazor Pager") event will be triggered. In the Click event of the Pager, we will calculate the number of items to be displayed on each page of the ListView. Initially, the ListView items are displayed on each page based on the Pager’s [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html?#Syncfusion_Blazor_Navigations_SfPager_PageSize "PageSize property of Blazor Pager") property. Refer to the following code example.
```html
<div class="control-container">
  @{
     var listData = ListData.Skip(Skip).Take(Take).ToList();
 
     <SfListView @ref="@List" DataSource="@listData" TValue="DataModel" HeaderTitle="Contacts" Height="355px" ShowHeader="true">
       <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
     </SfListView>
  }
  <div class="pager-container">
    <SfPager @ref="@Pager" PageSize=5 NumericItemsCount=2 TotalItemsCount=25 Click="Click">
    </SfPager>
  </div>
</div>
@code {
  SfPager Pager;
  public SfListView<DataModel> List { get; set; }
  public int Skip ;
  public int Take = 5;
 
  // Initialized the list.
  List<DataModel> ListData = new List<DataModel>();
  protected override void OnInitialized()
  {
     base.OnInitialized();
     ListData.Add(new DataModel { Name = "Nancy, Berlin, France" });
     ListData.Add(new DataModel { Name = "Andrew, Madrid, Germany"});
     ListData.Add(new DataModel { Name = "Janet, London, Brazil"});
     ListData.Add(new DataModel { Name = "Margaret, Marseille, Belgium"});
     ListData.Add(new DataModel { Name = "Steven, Cholchester, Switzerland"});
     ListData.Add(new DataModel { Name = "Laura , Tsawassen, Venezuela");
     ListData.Add(new DataModel { Name = "Robert, Tacoma, Austria"});
     ListData.Add(new DataModel { Name = "Michael, Redmond, Mexico"});
     ListData.Add(new DataModel { Name = "Albert, Kirkland, USA"});
     ListData.Add(new DataModel { Name = "Nolan, London, Sweden" });
     ListData.Add(new DataModel { Name = "Jennifer, Berlin, Finland");
     ListData.Add(new DataModel { Name = "Carter, Madrid, Italy"});
     ListData.Add(new DataModel { Name = "Allison, Marseille, Spain"});
     ListData.Add(new DataModel { Name = "John, Tsawassen, UK"});
     ListData.Add(new DataModel { Name = "Susan, Redmond, Ireland" });
     ListData.Add(new DataModel { Name = "Lydia, Cholchester, Portugal" });
     ListData.Add(new DataModel { Name = "Kelsey, London, Canada"});
     ListData.Add(new DataModel { Name = "Jessica, Kirkland, Denmark"});
     ListData.Add(new DataModel { Name = "Robert, Berlin, Austria"});
     ListData.Add(new DataModel { Name = "Shelley, Tacoma, Poland"});
     ListData.Add(new DataModel { Name = "Vanjack, Tsawassen, Norway"});
     ListData.Add(new DataModel { Name = "shelley, Cholchester, Argentina"});
     ListData.Add(new DataModel { Name = "Lydia, Kirkland, Finland"});
     ListData.Add(new DataModel { Name = "Jessica, Madrid, Sweden"});
     ListData.Add(new DataModel { Name = "Nolan, London, UK"});
     ListData.Add(new DataModel { Name = "Jennifer, Redmond, Italy"});
  }
 
  // This Click handler is triggered while clicking on the Pager numeric item.
  public void Click(PageClickEventArgs args)
  {
    // From the Pager instance, you can access its properties value and the current action details from this PageClickEventArgs.
    // Based on this information, calculate the Skip and Take values of the current page and manipulate the data source to get the current page data.
       Skip = (args.CurrentPage * Pager.PageSize) - Pager.PageSize;
       Take = Pager.PageSize;
  }
  public class DataModel
  {
     public string Name { get; set; }
     public string Id { get; set; }
  }
}
<style>
  .e-listview , .pager-container {
      max-width: 460px;
   }
</style>
```

## References

For more details, refer to our [Getting Started with Blazor Pager Component documentation](https://blazor.syncfusion.com/documentation/pager/getting-started#add-blazor-pager-component "Getting Started with Blazor Pager Component documentation") and [demos](https://blazor.syncfusion.com/demos/pager/default-functionalities?theme=fluent "Example of Default Functionalities in Blazor Pager Component").

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the new [Blazor Pager](https://www.syncfusion.com/blazor-components/blazor-pager "Blazor Pager UI") component, rolled out in the [2022 Volume 2](https://www.syncfusion.com/forums/175975/essential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-download " Essential Studio 2022 Volume 2") release. Try out this great control and provide your valuable feedback in the comments section. Check out our [Release Notes](https://blazor.syncfusion.com/documentation/release-notes/20.2.36 "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/blazor-components "Syncfusion What’s New") pages to see all the new updates in this release.

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [Customizing the Blazor Gantt Chart’s Taskbar: An Overview](https://dev.to/syncfusion/customizing-the-blazor-gantt-charts-taskbar-an-overview-3ab8 "Blog: Customizing the Blazor Gantt Chart’s Taskbar: An Overview")
- [A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 4](https://dev.to/syncfusion/a-full-stack-web-app-using-blazor-webassembly-and-graphql-part-4-37ef "Blog: A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 4")