Angular TreeList Paging Basics

The Kendo UI for Angular TreeList paging functionality allows you to split the whole data set into smaller portions and to display only the items corresponding to the current page. The paging vastly improves the performance in scenarios that involve large data sets. The TreeList exposes multiple configuration options for customizing the look and feel of the paging feature.

You can enable paging by using two methods:

• Using built-in binding directives—Allows you to implement data operations with less code.
• Using manual binding—Provides more control when implementing the paging feature.

Using the Data-Binding Directives

When you use the built-in binding directives for flat and hierarchical data, the TreeList performs the paging automatically for you.

Further details on how the data binding directives work under the hood are available in the data operations with the built-in directives documentation section.

Paging Flat Data

To enable paging when using flat data:

1. Provide the collection to the built-in kendoTreeListFlatBinding directive.
2. Set the pageable property to true.
3. Define the number of records per page by setting the pageSize property.

Copy Code<kendo-treelist
    [kendoTreeListFlatBinding]="flatData"
    [pageable]="true"
    [pageSize]="5">
    <kendo-grid-column field="CompanyName"></kendo-grid-column>
</kendo-treelist>

The following example demonstrates how the TreeList paging functionality works with the kendoTreeListFlatBinding directive.

Paging Hierarchical Data

To enable paging when using hierarchical data:

1. Provide the collection to the built-in kendoTreeListHierarchyBinding directive.
2. Set the pageable property to true.
3. Define the number of records per page by setting the pageSize property.

Copy Code<kendo-treelist
    [kendoTreeListHierarchyBinding]="hierarchicalData"
    [pageable]="true"
    [pageSize]="5">
    <kendo-grid-column field="name"></kendo-grid-column>
</kendo-treelist>

The following example demonstrates the TreeList paging functionality with the kendoTreeListHierarchyBinding directive.

Using Manual Binding

When using the manual binding approach, the paging is handled automatically if the data size is larger than the pageSize. To turn on paging when you use the data property:

1. Set the pageable option of the TreeList to true.
2. Define the number of records per page by setting the pageSize property.

Copy Code<kendo-treelist
    [data]="gridView"
    [pageable]="true"
    [pageSize]="5">
    <kendo-grid-column field="CompanyName"></kendo-grid-column>
</kendo-treelist>

The following example shows the paging functionality with the data property.

Suggested Links

• Pager Settings
• API Reference of the TreeListComponent
• API Index of the TreeList