Skip to main content

DxDataGrid<T>.PageIndex Property

Specifies the grid active page’s index.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

[Parameter]
public int PageIndex { get; set; }

Property Value

Type Description
Int32

A zero-based integer value that specifies the active page’s index.

Remarks

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

Use the PageIndex property to switch between grid pages in code. This property accepts values from 0 to PageCount - 1. To handle the PageIndex change, use the PageIndexChanged event.

The code below demonstrates how to use the DxPager editor as an external pager for the Data Grid component.

<div class="p-2">
    <DxPager ActivePageIndex="@pageIndex" ActivePageIndexChanged="@OnActivePageIndexChanged" PageCount="@pageCount"></DxPager>
</div>
<DxDataGrid @ref="@grid"
            DataAsync="@ForecastService.GetForecastAsync"
            ShowPager="false"
            PageSize="5"
            PageIndex="@pageIndex"          
            PageCountChanged="@OnPageCountChanged">
    <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn>
    <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)"></DxDataGridDateEditColumn>
    <DxDataGridColumn Field="@nameof(WeatherForecast.Forecast)"></DxDataGridColumn>
    <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)"></DxDataGridSpinEditColumn>        
    <DxDataGridComboBoxColumn Field="@nameof(WeatherForecast.CloudCover)" DataAsync="@ForecastService.GetCloudCoverAsync"></DxDataGridComboBoxColumn>
    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)"></DxDataGridCheckBoxColumn>
</DxDataGrid>

@code {
    int pageIndex;
    int pageCount;
    DxDataGrid<WeatherForecast> grid;

    protected override void OnInitialized() {
        base.OnInitialized();
        pageIndex = 0;
    }

    protected override void OnAfterRender(bool firstRender) {
        base.OnAfterRender(firstRender);
        pageCount = grid.PageCount;
    }

    void OnActivePageIndexChanged(int newPageIndex) {
        pageIndex = newPageIndex;
    }

    void OnPageCountChanged(int newPageCount) {
        pageCount = newPageCount;
        InvokeAsync(StateHasChanged);
    }
}

DataGrid External Pager

See Also