DxPager Class

A pager component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxPager :
    DxPagerBase

Remarks

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

Blazor_Navigation_Landing_Pager

NOTE

Online Demo: Pager

Add Pager to a Project

To add the <DxPager> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxPager>...</DxPager> markup to your application.

  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 = 5; 
}

Active Page

To activate a specific <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.

Blazor_Navigation_Pager

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

@code { 
    int PageCount = 10; 
    int ActivePageIndex = 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>

Blazor_Pager_Navigation_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>

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 = 5; 
    int ActivePageIndex = 2;
    int SwitchToInputBox = 15;
    // int SwitchToInputBox = 4;
}

Blazor_Pager_Switch_to_Input_Box

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
See Also