DxDataGrid<T>.PageIndex Property

Specifies the grid active page’s index.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.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

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