Angular TreeList Manual Paging
The manual paging gives the developer full control over how children are fetched and how the tree structure is built.
Compared to paging with the built-in directives, the manual approach requires you to define the child-fetching logic explicitly. It is especially useful for lazy-loading children on demand or filtering child nodes before they are displayed.
To enable manual paging:
- Bind root-level records to the
dataproperty. - Set the
fetchChildrencallback to return the children of a given node. - Set the
hasChildrencallback to indicate whether a node has children. - Set the
pageableoption totrue. - Define the number of records per page by setting the
pageSizeproperty. - Handle the
pageChangeevent to react when the user navigates to a different page. This is required when paging data on the server so that you can capture the currentskipandtakevalues and pass them to the server.
Paging Local Data
To paginate local data, filter the source array inside the fetchChildren callback to return the children for the expanded node.
When other data operations like sorting or filtering are also enabled, handle them within your
fetchChildrencallback before returning the result. For more details, refer to Data Operations.
The following example demonstrates the manual paging approach with a hospital organizational hierarchy.
Paging on the Server
To paginate data from a remote source, handle the pageChange event to capture the current paging state, then use the fetchChildren callback to send a request to the server and return an Observable<T[]>. For more details, refer to Processing Data on the Server.