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:
- Automatic Data Processing—Allows you to implement paging (or other data operations) with less code by using the built-in binding directives.
- Manual Paging—Provides more control when implementing the paging feature.
Automatic Data Processing
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.
To enable paging:
- Provide the collection to the built-in
kendoTreeListFlatBindingorkendoTreeListHierarchyBindingdirective depending on your data type. - Set the
pageableproperty totrue. - Define the number of records per page by setting the
pageSizeproperty.
<kendo-treelist
[kendoTreeListFlatBinding]="data"
idField="id"
parentIdField="parentId"
[pageable]="true"
[pageSize]="5">
<kendo-treelist-column field="name"></kendo-treelist-column>
</kendo-treelist>The following example demonstrates the paging functionality with the kendoTreeListFlatBinding directive applied.