Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.PageSizeSelectorItems Property

Specifies items available in the page size selector.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public IReadOnlyList<int> PageSizeSelectorItems { get; set; }

#Property Value

Type Description
IReadOnlyList<Int32>

Items available in the page size selector.

#Remarks

Enable the PageSizeSelectorVisible option to show the page size selector. Use the PageSizeSelectorItems property to specify page size values available in a drop-down list. Once a user selects a new value, the PageSize property value is updated, and the Grid is redrawn.

You can also enable the PageSizeSelectorAllRowsItemVisible option to show the All item. When a user chooses this item, the Grid displays all rows on one page.

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

<DxGrid Data="@Data"
        PageSizeSelectorVisible="true"
        PageSizeSelectorItems="@(new int[] { 5, 10, 15 })"
        PageSizeSelectorAllRowsItemVisible="true">
    <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; }

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

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

Blazor Grid Page Size Selector

Run Demo: Data Grid - Paging

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

See Also