DxTreeList.PagerVisible Property

Specifies whether the TreeList displays the pager.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool PagerVisible { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to display the pager; otherwise, false.

Remarks

The TreeList component splits data rows across multiple pages. The pager allows users to navigate between pages. To customize the pager’s appearance, handle the CustomizeElement event.

The TreeList hides the pager in the following cases:

• The total number of rows is less than or equal to the PageSize value and the page size selector is hidden.
• You enable the ShowAllRows option to display all rows on one page and do not add the All item to the page size selector.
• You enable the VirtualScrollingEnabled property.

The TreeList component does not support a template for the pager. If you want to display custom content in the pager area, set the PagerVisible property to false to hide the default pager and organize your own components for navigation in an external container.

In the following code snippet, an external <div> displays the total number of records next to a custom DxPager component:

.treelist-container {
    width: 950px;
}
.pager-container {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #d2d2d2;
    border-top: none;
}

<div class="treelist-container">
    <DxTreeList @ref="@TreeList"
                Data="@TreeListData"
                KeyFieldName="Id"
                ParentKeyFieldName="ParentId"
                @bind-PageIndex="@ActivePageIndex"
                PagerVisible="false"
                PageSize="@PageSize"
                FooterDisplayMode="TreeListFooterDisplayMode.Never">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" />
        <DxTreeListDataColumn FieldName="EmployeeName" />
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
        <TotalSummary>
            <DxTreeListSummaryItem SummaryType="TreeListSummaryItemType.Count"
                                   FieldName="@RowCountField"
                                   Visible="false" />
        </TotalSummary>
</DxTreeList>
    <div class="pager-container">
        <DxPager PageCount="@PageCount" @bind-ActivePageIndex="@ActivePageIndex" />
        <div>
            Total: @TotalRecords records
        </div>
    </div>
</div>

@code {
    ITreeList TreeList { get; set; }
    List<EmployeeTask> TreeListData { get; set; }
    int PageCount { get; set; }
    int TotalRecords { get; set; }
    int PageSize { get; set; } = 5;
    int ActivePageIndex { get; set; } = 0;
    string RowCountField { get; set; } = "DueDate";

    protected override void OnInitialized() {
        TreeListData = EmployeeTaskService.GenerateData();
    }
    protected override void OnAfterRender(bool firstRender) {
        TotalRecords = (int)(TreeList.GetTotalSummaryValue(TreeList?.GetTotalSummaryItems().First()));
        PageCount = (int)Math.Ceiling((decimal)TotalRecords / PageSize);
        StateHasChanged();
        base.OnAfterRender(firstRender);
    }
}

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

Implements

PagerVisible

PagerVisible