Skip to main content

DxGrid.PageSizeChanged Event

Fires when the page size changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Parameters

Type Description
Int32

A new PageSize property value.

Remarks

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

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

The following example displays an informational message when a user selects a new value in the page size selector.

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

<div><b>@PageSizeInfo</b></div>

<DxGrid Data="@Data"
        PageSize="@PageSize"
        PageSizeSelectorVisible="true"
        PageSizeSelectorItems="@(new int[] { 5, 10, 15 })"
        PageSizeChanged="OnPageSizeChanged">
    <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; }
    int PageSize { get; set; } = 10;
    string PageSizeInfo { get; set; } = "Page size is 10";

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

    void OnPageSizeChanged(int newPageSize) {
        PageSizeInfo = "Page size was changed from " + PageSize + " to " + newPageSize;
        PageSize = newPageSize;
    }

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

Blazor Grid Page Size Changed

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

See Also