DxDataGrid<T>.PagerPageSizeSelectorVisible Property

Specifies whether the page size selector is displayed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public bool PagerPageSizeSelectorVisible { 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 Data Grid’s page size. Once a user selects a new size in this selector, the PageSize property value is updated, and the Data Grid is redrawn.

To display the page size selector, set the PagerPageSizeSelectorVisible property to true. The selector consists of two parts:

  • A list of predefined page sizes. To fill this list, use the PagerAllowedPageSizes property. If the PageSize property value is not added to this list, the value is displayed in the selector’s editor but not available in the selector’s list.
  • The All item. To show it, set the PagerAllDataRowsItemVisible property to true. When a user selects this item, all grid rows are displayed on one page, and the pager is hidden.
<DxDataGrid Data="@DataSource" 
            PagerPageSizeSelectorVisible="true" 
            PagerAllowedPageSizes=@(new int[] {10,20,30}) 
            PagerAllDataRowsItemVisible="true"
            PagerNavigationMode=@PagerNavigationMode.NumericButtons>
        <DxDataGridColumn Field="@nameof(Product.Id)" Width="50px"/>
        <DxDataGridColumn Field="@nameof(Product.ProductName)" Caption="Product Name" Width="250px"/>
        <DxDataGridColumn Field="@nameof(Product.Availability)" Width="85px"/>
        <DxDataGridColumn Field="@nameof(Product.ProductCategoryId)"  Width="60px"/>
    </DxDataGrid>

DataGrid Page Size Selector

Run Demo: Data Grid - Paging

See Also