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

    Specifies the maximum number of numeric buttons displayed in the pager.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue(5)]
    [Parameter]
    public int PagerVisibleNumericButtonCount { get; set; }

    Property Value

    Type Default Description
    Int32 5

    The maximum number of numeric buttons.

    Remarks

    In numeric buttons mode, use the PagerVisibleNumericButtonCount property to specify the maximum number of buttons displayed in the pager simultaneously.

    When the TreeList is rendered for the first time, the pager shows a range of numeric buttons from 1 to the PagerVisibleNumericButtonCount value. If you set the PageIndex property to a value out of this range, the range changes to include the specified page. A user can click arrow navigation buttons to display other numeric buttons.

    The following example displays 7 numeric buttons in the pager.

    @inject SpaceObjectDataProvider SpaceObjectDataProvider
    
    <DxTreeList Data="TreeListData"
                ChildrenFieldName="Satellites"
                PageSize="5"
                PagerVisibleNumericButtonCount="10"
                PagerNavigationMode="PagerNavigationMode.NumericButtons">
        <Columns>
            <DxTreeListDataColumn FieldName="Name" />
            <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
            <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
                <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
            </DxTreeListDataColumn>
            <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2"/>
            <DxTreeListDataColumn FieldName="Volume10pow9KM3" DisplayFormat="N2">
                <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
            </DxTreeListDataColumn>
            <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2">
                <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
            </DxTreeListDataColumn>
        </Columns>
    </DxTreeList>
    
    @code {
        object TreeListData { get; set; }
    
        protected override async Task OnInitializedAsync() {
            TreeListData = SpaceObjectDataProvider.GenerateData();
        }
    }
    

    Blazor TreeList Pager Numeric Button Count

    Arrow navigation buttons are hidden if all of the numeric buttons are displayed. To change this behavior, use the PagerAutoHideNavButtons property.

    Run Demo: TreeList - Paging

    For more information about paging in the TreeList component, refer to the following topic: Paging in Blazor TreeList.

    See Also