Skip to main content

DxGrid.PagerVisible Property

Specifies whether the Grid displays the pager.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool PagerVisible { get; set; }

Property Value

Type Default Description
Boolean true

true to display the pager; otherwise, false.

Remarks

The Grid component splits data rows across multiple pages. The pager allows users to navigate between pages. To customize the pager’s appearance, handle the CustomizeElement event.

The Grid hides the pager in the following cases:

Grid does not support a template for the pager. If you want to display custom content in the pager area, set the PagerVisible property to false to hide the default pager and organize your own components for navigation in an external container.

The following code snippet displays an external DxPager component instead of the built-in pager:

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxPager @bind-ActivePageIndex="@PageIndex"
         PageCount="10" />
<br/>

<DxGrid Data="@Data"
        PagerVisible="false"
        @bind-PageIndex="@PageIndex">
    <Columns>
        <DxGridDataColumn FieldName="ShipName" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="Freight" />
        <DxGridDataColumn FieldName="OrderDate" />
        <DxGridDataColumn FieldName="ShippedDate" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }
    int PageIndex { get; set; } = 0;

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Orders.Take(100).ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid External Pager

You can also display custom content in external pager area. Refer to the following section for an example: Display Total Number of Visible Records (Custom Pager).

Run Demo: Data Grid - Paging

For more information about paging in the Grid component, refer to the following topic: Paging in Blazor Grid.

Implements

See Also