DxGrid.PagerNavigationMode Property
Specifies how users navigate between Grid pages.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(PagerNavigationMode.Auto)]
[Parameter]
public PagerNavigationMode PagerNavigationMode { get; set; }
Property Value
Type | Default | Description |
---|---|---|
PagerNavigationMode | Auto | A PagerNavigationMode enumeration value. |
Available values:
Name | Description |
---|---|
Auto | The input box is displayed if the number of pages is greater than or equal to the SwitchToInputBoxButtonCount (for the Pager) or PagerSwitchToInputBoxButtonCount (for the Grid), or the pager is shown on small devices. Otherwise, numeric buttons are displayed. |
InputBox | Users can type a page number in the displayed Go to Page input box to jump to the corresponding page. |
NumericButtons | Users can click numeric buttons to navigate between pages. |
Remarks
The Grid splits a large amount of data rows across multiple pages and displays the pager to enable data navigation. Use the PagerNavigationMode
property to specify how users navigate between pages. The following values are available:
- PagerNavigationMode.InputBox
The pager contains an input box in which a user can type a page number.
- PagerNavigationMode.NumericButtons
The pager contains numeric buttons.
- PagerNavigationMode.Auto (Default)
- The pager switches from numeric buttons to the input box in the following cases:
- The total number of pages is greater than or equal to the PagerSwitchToInputBoxButtonCount value.
- The Grid is displayed on small devices. In this case, the PagerSwitchToInputBoxButtonCount value is ignored.
The following example always displays numeric buttons in the pager:
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="@Data"
PagerNavigationMode="PagerNavigationMode.NumericButtons">
<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();
}
}
When the pager contains numeric buttons, you can also define the following properties:
- PagerVisibleNumericButtonCount
- Specifies the maximum number of numeric buttons displayed in the pager.
- PagerAutoHideNavButtons
- Specifies whether the navigation buttons are hidden when all numeric buttons are displayed.
The pager can also contain the page size selector.
For more information about paging in the Grid component, refer to the following topic: Paging in Blazor Grid.