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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 a LoadMoreRequestArgs object 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.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Button Template

The Load more button can be fully customized according to the application needs by using the kendoTreeViewLoadMoreButtonTemplate directive.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?