Skip to main content

DxGrid.PagerPosition Property

Specifies the pager position.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(GridPagerPosition.Bottom)]
[Parameter]
public GridPagerPosition PagerPosition { get; set; }

Property Value

Type Default Description
GridPagerPosition Bottom

A GridPagerPosition enumeration value.

Available values:

Name Description
Bottom

The Grid displays the pager at the bottom.

Top

The Grid displays the pager at the top.

TopAndBottom

The Grid displays the pager at the top and at the bottom.

Remarks

The Grid splits a large amount of data rows across multiple pages and displays the pager at the bottom of the Grid.

Blazor Grid Pager Position Bottom

Use the PagerPosition property to show the pager at the top of the Grid (GridPagerPosition.Top) or both at the top and bottom (GridPagerPosition.TopAndBottom).

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

<DxGrid Data="@Data"
        PagerPosition="GridPagerPosition.TopAndBottom">
    <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; }

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

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

Blazor Grid Pager Position Top and Bottom

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