# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective) directive to the TreeView and specify the desired initial [`pageSize`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective#pagesize).

The following example demonstrates how to limit the number of displayed nodes when all the available data is loaded into the TreeView.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/load-more/local-data/source.txt)

## Remote Data

The [`kendoTreeViewLoadMore`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective) 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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective#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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmorerequestargs) object as a single parameter.
* [`pageSize`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective#pagesize) - The initial page size for the each level.
* [`totalField`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective#totalfield) - The field that holds the information how many children in total the node has.
* [`totalRootNodes`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective#totalrootnodes) - As the root level nodes are not associated with any parent node, the total number of root nodes has to be provided exclusively.

The following example demonstrates how to configure the `kendoTreeViewLoadMore` directive to fetch additional nodes from a remote server each time a **Load more** button is clicked.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/load-more/remote-data/source.txt)

## Managing Page Sizes

The page size for each data item children group is initially set through the [`pageSize`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective#pagesize)
property of the [`kendoTreeViewLoadMore`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective) directive. It can, however, be read and manually
changed for any node through the **TreeView** [`getNodePageSize`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#getnodepagesize) and [`setNodePageSize`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#setnodepagesize) methods.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/load-more/change-page-size/source.txt)

## Button Template

The **Load more** button can be fully customized according to the application needs by using the
[`kendoTreeViewLoadMoreButtonTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmorebuttontemplatedirective) directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/load-more/button-template/source.txt)

## Suggested Links

* [Angular TreeView Homepage](https://www.telerik.com/kendo-angular-ui/treeview)
* [API Reference of the Angular TreeView](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api)
* [API Reference of the `LoadMoreDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmoredirective)
* [API Reference of the `LoadMoreRequestArgs`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmorerequestargs)
* [API Reference of the `LoadMoreButtonTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/loadmorebuttontemplatedirective)
* [API Reference of the `TreeViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api)