Skip to main content

DxGrid.PageIndexChanged Event

Fires when the grid’s active page index changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<int> PageIndexChanged { get; set; }

Parameters

Type Description
Int32

A new value of the PageIndex property.

Remarks

The PageIndexChanged event fires each time the PageIndex property value changes. The event is handled automatically when you use two-way data binding for the PageIndex property (@bind-PageIndex).

You can also handle this event to create a custom response to page index changes.

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

<DxGrid Data="@Data" PageSize="5"
        PageIndex="@GridPageIndex"
        PageIndexChanged="OnPageIndexChanged">
    <Columns>
        <DxGridDataColumn FieldName="ShipName" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="Freight" />
        <DxGridDataColumn FieldName="OrderDate" />
        <DxGridDataColumn FieldName="ShippedDate" />
    </Columns>
</DxGrid>

<div>@PageIndexInfo</div>

@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }
    int GridPageIndex { get; set; }
    string PageIndexInfo { get; set; }

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

    void OnPageIndexChanged(int newPageIndex) {
        GridPageIndex = newPageIndex;
        PageIndexInfo = "You switched to page " + (newPageIndex + 1);
    }

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

Blazor Grid Page Index Changed

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

See Also