DxDataGrid<T>.ShowPager Property

Specifies whether or not the grid displays the pager.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public bool ShowPager { get; set; }

Property Value

Type Description
Boolean

true, to display the pager; otherwise, false.

Remarks

This Data Grid component can display a pager at the bottom of the grid. When the number of records in the grid exceeds the number permitted by the PageSize, you can use this pager element to navigate between the pages of records.

Pager Location

Hide the Pager

Set the ShowPager property to false.

<DxDataGrid Data="@forecasts" ShowPager="false" ... >
</DxDataGrid>

The following example hides the pager element if the grid control contains only one page.

<DxDataGrid Data="@weatherForecasts"
            RowInserting="@OnRowInserting"
            RowRemoving="@OnRowDeleting"
            ShowPager="@isVisible"
            @ref="grid">
    ...
</DxDataGrid>

@code {
    DxDataGrid<WeatherForecast> grid;
    bool isVisible = true;

    // Compare the grid's page size to the number of records in the data source
    protected void UpdatePagerVisibility() {
        if (grid.PageSize >= weatherForecasts.Count)
            isVisible = false;
        else
            isVisible = true;
        InvokeAsync(StateHasChanged);
    }

    protected override void OnAfterRender(bool firstRender) {
        base.OnAfterRender(firstRender);
        UpdatePagerVisibility();
    }

    // Rerender the component when a user adds a new record
    void OnRowInserting(Dictionary<string, object> itemProperties) {
        weatherForecasts.Add(UpdateItem(new WeatherForecast(), itemProperties));
        UpdatePagerVisibility();
    }

    // Rerender the component when a user deletes a record
    void OnRowDeleting(WeatherForecast item) {
        weatherForecasts.Remove(item);
        UpdatePagerVisibility();
    }
}
NOTE

The grid automatically disables the pager element when the DataNavigationMode property is set to VirtualScrolling. In this mode, the grid loads data on demand when a user scrolls grid rows.

Specify the Maximum Number of Data Rows on a Page

Use the PageSize property.

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

Data Grid - Pager

Change Navigation Mode

Use the PagerNavigationMode property to specify how users navigate between the grid pages (using numeric buttons or the Go To Page input box).

<DxDataGrid Data="..."
         PageIndex="1"
         PagerNavigationMode="PagerNavigationMode.InputBox">
</DxPager>

Data Grid GoToPage

If PagerNavigationMode is set to Auto, the pager element’s appearance depends on the total number of pages. If the page count equals or exceeds PagerSwitchToInputBoxButtonCount, the Pager switches from numeric buttons to the Go to Page input box.

<DxDataGrid Data="@forecasts" 
            PageCount="@PageCount"
            @bind-PageIndex="@PageIndex"
            PagerSwitchToInputBoxButtonCount="@SwitchToInputBox"> 
</DxDataGrid>

@code { 
    int PageCount = 5; 
    int PageIndex = 2;
    int SwitchToInputBox = 15;
    // int SwitchToInputBox = 4;
}

Pager Switch to Input Box

Show the Page Size Selector

Set the PagerPageSizeSelectorVisible property to true.

<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

Online Demos

Run Demo: Data Grid - Paging Run Demo: Data Grid - Virtual Scrolling

See Also