How to Add and Remove Items in TreeView

Creating a tree structure usable by the TreeView component is simple. You need to create an array that will hold tree item objects with few fields set:

• id - Specifies a unique identifier used to differentiate items from each other
• pid - (optional), Specifies the identifier of parent item to which an item is child of
• text - Specifies the item label
• expanded - (optional), determines whether the item is expanded or collapsed

A complete list of all fields predefined for tree item objects is available in TreeView API, under data section check out the item object.

A sample code that shows how to add and remove items in TreeView is available in JavaScript, Angular, React and Vue, in following sections below.

You can have the tree hierarchy created initially in code or you can load it from a local or remote data source. An example would be to a load TreeView on demand from a JSON file.

Load Sample

More Demos

TreeView component is part of IntegralUI Web
a suite of native Web Components for Angular, React and Vue

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

During run-time, you can also use a set of built-in methods that allows you to add and remove items on demand. Using control panel on the right side, you can see how each of this methods is used. In following sections below, you will learn how to use these methods.

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

Adding an Item to the TreeView

The tree structure in the TreeView component is determined by the items property, which holds an array of tree item objects. Each of these objects can have children of other tree item objects. You can modify this array using standard JavaScript methods for array, or use built-in methods in TreeView that allows you to add an item at specific position within the tree hierarachy. Any action performed when using these methods is accompanied with a corresponding event(s).

For example to add a new item to the end of the tree structure you can use the addItem method. The signature of this method is:

addItem(item, parent)

where item is the item object that you want to add, and parent determines whether item is added as a child or as a root item.

• JavaScript
• Angular
• React

Insert Item at Specific Position

Above method will only add items to the end of the tree hierachy. However, in some case you may need to insert a new item to a specific position. To do this you can use the following methods:

• insertItemAt - Inserts the specified item at specified position in tree hierachy
• insertItemAfter - Inserts the specified item as a sibling at position after the target item
• insertItemBefore - Insert the specified item as a sibling at position before the target item

Here is an example of these methods in use:

• JavaScript
• Angular
• React

Whenever a new item is added to the TreeView, the itemAdding and itemAdded events are fired. This gives you further control on how and when you want to add new items to the tree view. By handling the itemAdding event you can cancel the whole process, by setting the cancel field in event data to false

How to Delete Item from Tree Structure

Finnaly, any existing item in tree strucure can also be removed from it. For this purpose three methods are available:

• removeItem - Removes a specified item from tree hierachy
• removeItemAt - Removes an item which is located at specified index
• clearItems - Removes all items from the TreeView

In following example we are showing how to remove the currently selected item from the TreeView.

• JavaScript
• Angular
• React

In similar way as with methods for adding items, whenever an item is deleted from the TreeView, the itemRemoving and itemRemoved events are fired. By handling the itemRemoving event you can prevent a specific item to become deleted when some condition is fullfilled.

Conclusion

The whole tree hierarchy displayed in the TreeView component is determined by an array that holds a set of parent and child tree item objects. You can modify this array using standard JavaScript methods or using already built-in methods to add and remove items on demand into the tree view. Whenever an item is added or removed, a corresponding event is fired that you can handle in your code and add custom actions specific to your application.

TreeView is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.