DxDataGrid<T>.PageSize Property

Specifies the maximum number of rows that the grid can display on a page.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public int PageSize { get; set; }

Property Value

Type Default Description
Int32

10

The number of rows.

Remarks

Use the PageSize property to specify the maximum number of rows that can be displayed on a page.

NOTE

If PageSize is less than or equal to 0, all grid rows are displayed on one page. In this mode, the grid does not display the pager.

Data Grid - Pager

<DxDataGrid Data="@forecasts" PageSize="7" >
    ...
</DxDataGrid>

To hide the pager in the grid, set the ShowPager property to false.

NOTE

The PageSize property is not in effect if the DataNavigationMode property is set to VirtualScrolling.

If you specify the PageSize property when the page size selector is displayed, the Data Grid component uses the PageSize value. If this value is not listed in the page size selector, the value is displayed in the selector’s editor but not added to the selector’s list.

Data Grid - Page size selector

<DxDataGrid Data="@DataSource" 
            ShowPager="true" 
            PagerPageSizeSelectorVisible="true" 
            PageSize="7" 
            PagerAllDataRowsItemVisible="true" 
            PagerAllowedPageSizes=@(new int[] {10,20,40}) 
            PagerNavigationMode=@PagerNavigationMode.NumericButtons>
    <DxDataGridColumn Field="@nameof(Product.Id)" Width="50px"/>
    <DxDataGridColumn Field="@nameof(Product.ProductName)" Caption="Product Name"/>
    <DxDataGridColumn Field="@nameof(Product.Availability)" Width="85px"/>
    <DxDataGridColumn Field="@nameof(Product.ProductCategoryId)"  Width="60px"/>
    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)" Caption="Subcategory" />
    <DxDataGridDateEditColumn Field="@nameof(ProductFlat.LastUpdated)" Caption="Last Updated" />
</DxDataGrid>

Run Demo: Data Grid - Paging

See Also