The requested page is not available for the requested platform. You are viewing the content for Default platform.

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

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, user should click it or use the Prev/Next 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 CollapseButtonCount property to specify the maximum number of numeric buttons that can be displayed within a pager. If the PageCount property's value is greater than the CollapseButtonCount property's value, an Ellipsis symbol is shown to indicate page numbers that are omitted.

Blazor_Pager_CollapseButtons

<DxPager PageCount=100
         ActivePageIndex=50 
         CollapseButtonCount=10> 
</DxPager>

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
See Also