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:
- Provide the collection to the built-in
kendoTreeListFlatBinding
directive. - Set the
pageable
property totrue
. - Define the number of records per page by setting the
pageSize
property.
<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:
- Provide the collection to the built-in
kendoTreeListHierarchyBinding
directive. - Set the
pageable
property totrue
. - Define the number of records per page by setting the
pageSize
property.
<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:
- Set the
pageable
option of the TreeList totrue
. - Define the number of records per page by setting the
pageSize
property.
<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.