Skip to main content

DxGrid.PageSizeSelectorVisible Property

Specifies whether the Grid displays the page size selector in the pager.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool PageSizeSelectorVisible { get; set; }

Property Value

Type Default Description
Boolean false

true to display the page size selector; otherwise, false.

Remarks

The page size selector allows users to change the number of rows displayed on a page. Once a user selects a new value in this selector, the PageSize property value is updated, and the Grid is redrawn.

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.

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 and sets the ShowAllRows property to true.

@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