DxPager Class

A pager component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxPager :
    DxComponentBase,
    ISizeModeAccessor,
    IRequireSelfCascading

Remarks

The DevExpress Pager for Blazor (<DxPager>) component enables page navigation. It is integrated into our Data Grid and Pivot Grid components.

Pager Overview

Run Demo: Pager

Add a Pager to a Project

Follow the steps below to add the Pager component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxPager></DxPager> markup to a Razor page.
  3. Configure the component (see the sections below).

Page Count

Use the PageCount property to specify the total number of pager’s pages.

<DxPager PageCount="@PageCount"> 
</DxPager>

@code { 
    int PageCount { get; set; } = 5; 
}

Active Page

To activate a <DxPager> page, a user should click it or use the navigation buttons. To switch pages in code, assign a zero-based page index to the ActivePageIndex property. To handle the active page’s change, use the ActivePageIndexChanged event.

Navigation Pager

<DxPager PageCount="@PageCount"
         @bind-ActivePageIndex="@ActivePageIndex" > 
</DxPager>

@code { 
    int PageCount { get; set; } = 10; 
    int ActivePageIndex { get; set; } = 7;
}

Numeric Button Count

Use the VisibleNumericButtonCount property to specify the maximum number of numeric buttons that can be displayed within a pager. When the component is rendered for the first time, it displays a range of numeric buttons that includes the active page (if the ActivePageIndex value is specified) or numeric buttons from 1 to the VisibleNumericButtonCount value. To navigate to other numeric buttons, a user should use navigation buttons.

<DxPager PageCount="100"
         ActivePageIndex="50"
         VisibleNumericButtonCount="7"
         NavigationMode="PagerNavigationMode.NumericButtons"> 
</DxPager>

Pager Navigation Buttons

Run Demo: Pager - Limit the Number of Page Buttons

If all the numeric buttons are displayed (i.e., PageCount is less or equal to the VisibleNumericButtonCount), the Pager’s navigation buttons are hidden.

<DxPager PageCount="10"
         ActivePageIndex="2"
         VisibleNumericButtonCount="10">
</DxPager>

Run Demo: Pager - All Page Numbers Visible

When the Pager is in Auto mode and the total number of its pages (PageCount) equals or exceeds the SwitchToInputBoxButtonCount property’s value, the Pager switches from numeric buttons to the Go to Page input box.

<DxPager PageCount="@PageCount"
         @bind-ActivePageIndex="@ActivePageIndex"
         SwitchToInputBoxButtonCount="@SwitchToInputBox"> 
</DxPager>

@code { 
    int PageCount { get; set; } = 5; 
    int ActivePageIndex { get; set; } = 1;
    int SwitchToInputBox { get; set; } = 15;
    // int SwitchToInputBox { get; set; } = 4;
}

Pager Switch to Input Box

Size Modes

Use the SizeMode property to specify a Pager size. The code below applies different size modes to Pager components.

<DxPager PageCount="1000" 
         ActivePageIndex="5" 
         NavigationMode="PagerNavigationMode.InputBox" 
         SizeMode="SizeMode.Small" />

<DxPager PageCount="1000" 
         ActivePageIndex="5" 
         NavigationMode="PagerNavigationMode.InputBox" 
         SizeMode="SizeMode.Medium" />

<DxPager PageCount="1000" 
         ActivePageIndex="5" 
         NavigationMode="PagerNavigationMode.InputBox" 
         SizeMode="SizeMode.Large" />

For more information, refer to Size Modes.

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
See Also