DxDataGrid<T>.PageIndexChanged Event

Fires when the grid's active page is changed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

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

Parameters

Type Description
Int32

A zero-based integer number that specified the new active page's index.

Remarks

To switch between grid pages in code, use the PageIndex property. To handle the PageIndex property's change, use the PageIndexChanged event.

The code below attaches the Bootstrap Progress bar component to the grid's pager.

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync"
            ShowPager="true"
            PageSize="3"
            PageIndex="@pageIndex"
            PageIndexChanged="@OnPageIndexChanged"
            PageCount="@pageCount"
            PageCountChanged="@OnPageCountChanged">
    <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>

<div class="progress">
    <div class="progress-bar" role="progressbar" style="@($"width: {progress}%;")" aria-valuenow="@progress" aria-valuemin="0" aria-valuemax="100"></div>
</div>

@code {
    int pageIndex;
    int pageCount;
    int progress;

    void OnPageIndexChanged(int newPageIndex) {
        pageIndex = newPageIndex;
        OnProgressBar(pageIndex, pageCount);
    }
    void OnPageCountChanged(int newPageCount) {
        pageCount = newPageCount;
        OnProgressBar(pageIndex, pageCount);
    }
    void OnProgressBar(int pageIndex, int pageCount) {
        var newProgressBar = (int)(Math.Round(((pageIndex + 1.0) / pageCount), 2) * 100);
        if(progress != newProgressBar) {
            progress = newProgressBar;
            InvokeAsync(StateHasChanged);
        }
    }
}

DataGrid Pager Progress

See Also