Load Data on Demand in TreeView Component

Instead of populating the TreeView with all the data at once, you can load new data on demand whenever a node is expanding. In this article, you will learn how to add new data to a specified node from a local or remote data source, just before the node is expanded.

The sample code below shows how to load additional items in TreeView dynamically in each JavaScript framework: Angular, React and Vue.

In above demo, when you click on expanding icon, it changes to a loading icon representing that a new data is loading. Once the data is fully loaded the loading icon is removed and the treeview layout is updated showing the new data. For demonstration purposes, a random child nodes are created during loading process. This is just to present how to change the expanding icon to a loading icon.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Initial Tree Structure

At first, in this example the TreeView has only few items. They are collapsed and don't have any children.

• JavaScript
• Angular
• React
• Vue

By default, if an item doesn't have any children, its expanding icon is hidden. In order to add new data when item is expanding, the expanding icon must be visible. To solve this, each item that may have children (not loaded yet), it must have the hasChildren field set to true. This allows the expanding icon to appear.

How to Add Child Nodes on Demand

There are multiple ways to add new items to the TreeView. You can use some of available public methods for inserting new items (addItem, insertItemAt, etc.) or like in this example, directly placing a new item into the list using the push method.

To add child items when expanding icon is clicked for a specified item, you can handle the beforeExpand event and add a code there that will load a new data:

• JavaScript
• Angular
• React
• Vue

In this example, the data is created with random number of child items where some of them may also have children.

To show that something is loading into the clicked item, you can use the beginLoad method. This method when called replaces the expanding icon with a loading icon.

You can use any custom image or animated gif as a loading icon. By modifying the CSS setting for the expanding icon, you can set a new url that points to a custom loading image.

When data is fully loaded, the endLoad method is called so that the loading icon is removed. At the end, the TreeView appearance is updated by calling the refresh method.

Because in this case the data is created and loaded locally, the load time is instant. To show that something is loading, a timeout of 1 second is used to allow animation to take place. In real case scenarios, this is not required.

Load JSON Data on Demand in TreeView Component

Instead of using local data, you can populate the TreeView from a remote data source. You can get the data from a server or other sources by specifying the item id. Then the data will be added as children, whenever item is expanding.

To load data from a JSON file, you can use the Angular http service or like in React use fetch:

• JavaScript
• Angular
• React
• Vue

Related: How to Load JSON Data in TreeView

Once the data is retrieved from the server, the best way to load it into the TreeView is by using the loadData method. This method accepts any data in flat format or as a tree hierarchy with custom fields. If a parent item is specified, the data is added as its children, otherwise the TreeView is populated in whole.

When you have data with custom object filed names, you need to specify an object that will map your custom data fields with the ones used by the TreeView.

Conclusion

IntegralUI TreeView component for Angular, React and Vue comes with built-in functionality that allows you to load data on demand into the TreeView as a whole, or as children to specified parent node. During loading process, you can show a custom loading icon that you can change via CSS.

You can load new data either from a local or remote data source like JSON file or directly from a server database by specifying the parent item id.

IntegralUI Web is an UI library of native web components that includes the TreeView. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.