Skip to main content
All docs
V25.1
  • DxTreeList.PagerNavigationMode Property

    Specifies how users navigate between TreeList pages.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue(PagerNavigationMode.Auto)]
    [Parameter]
    public PagerNavigationMode PagerNavigationMode { get; set; }

    Property Value

    Type Default Description
    PagerNavigationMode Auto

    An enumeration value.

    Available values:

    Name Description
    Auto

    The input box is displayed if the total number of pages is greater than or equal to the SwitchToInputBoxButtonCount (for the Pager) or PagerSwitchToInputBoxButtonCount (for the Grid or TreeList), 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 TreeList 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.

    Blazor TreeList Page Size Selector

    PagerNavigationMode.NumericButtons

    The pager contains numeric buttons.

    Blazor TreeList Page Size Selector

    PagerNavigationMode.Auto (Default)
    The pager switches from numeric buttons to the input box in the following cases:

    The following example always displays numeric buttons in the pager:

    @inject EmployeeTaskService EmployeeTaskService
    
    <DxTreeList Data="TreeListData"
                KeyFieldName="Id"
                ParentKeyFieldName="ParentId"
                PagerNavigationMode="PagerNavigationMode.NumericButtons">
        <Columns>
            <DxTreeListDataColumn FieldName="Name" Caption="Task" />
            <DxTreeListDataColumn FieldName="EmployeeName" />
            <DxTreeListDataColumn FieldName="StartDate" />
            <DxTreeListDataColumn FieldName="DueDate" />
        </Columns>
    </DxTreeList>
    
    @code {
        List<EmployeeTask> TreeListData { get; set; }
    
        protected override void OnInitialized() {
            TreeListData = EmployeeTaskService.GenerateData();
        }
    }
    

    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 TreeList component, refer to the following topic: Paging in Blazor TreeList.

    See Also