Load More Button
The TreeView enables you to display only a limited number of nodes in each level, when the provided data set is too big.
Local Data
To reduce the number of rendered nodes and display a Load more button at the end of each level,
apply the kendoTreeViewLoadMore directive to the TreeView and specify the desired initial pageSize.
The following example demonstrates how to limit the number of displayed nodes when all the available data is loaded into the TreeView.
Remote Data
The kendoTreeViewLoadMore directive can be configured to fetch the new nodes on demand from the server.
To achieve the aforementioned result, the following configuration data has to be provided:
kendoTreeViewLoadMore- The directive selector is also an input for a function that acquires new child nodes. It is called each time a Load more button is pressed. The function receives aLoadMoreRequestArgsobject as a single parameter.pageSize- The initial page size for the each level.totalField- The field that holds the information how many children in total the node has.totalRootNodes- As the root level nodes are not associated with any parent node, the total number of root nodes has to be provided exclusively.
Managing Page Sizes
The page size for each data item children group is initially set through the pageSize
property of the kendoTreeViewLoadMore directive. It can, however, be read and manually
changed for any node through the TreeView getNodePageSize and setNodePageSize methods.
Button Template
The Load more button can be fully customized according to the application needs by using the
kendoTreeViewLoadMoreButtonTemplate directive.