Overview of IntegralUI TreeView Component

IntegralUI TreeView is a native Web Component that displays tree hierarchy of items that can be reordered using advanced drag drop operations. You can load data on demand during run-time from local or remote data sources, and add custom HTML content in each tree item. In following sections, you can find details about various features available in the TreeView component. This component is available for use in JavaScript Frameworks: Angular, React, Vue and others.

Above demonstration shows a simple tree hierarchy, each item has a checkbox, icon and a command button. When item is hovered, a command button will appear on right side, which when clicked will delete the item.

You can reorder items by click and drag over specific item. A dragging window will appear, stating the target item and position at which item can be dropped. During drag drop operations, you can also create a copy of an item by holding the SHIFT key. The dragging window will change its icon, showing a + sign next to position marker.

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

How to Use IntegralUI TreeView in Angular, React and Vue

In order to use the TreeView component in your app, you need to do the following:

• Place the TreeView using the iui-treeview tag name
• Define the template that will be used to create tree items
• Add custom HTML elements as item content
• Connect the TreeView to your data source

Because tree hierarchy can contain items in many levels, instead of setting a tree in HTML, you can just set the template by which each item is created:

• JavaScript
• Angular
• React
• Vue

If you want to show item with different content then other items, you can set condition by which a different content will appear.

In this example, each item has a checkbox, icon, label and a command button on the right side. The command button when clicked will delete the item from the tree hierarachy.

• JavaScript
• Angular
• React
• Vue

When you have a template ready, you need to link the data source with the TreeView using the items property. The data source can be any array in flat or tree format.

IntegralUI TreeView - Properties, Events and Methods

A detailed list for each property, event and method is available here: TreeView online help. Using this you can customize the appearance and behavior of the TreeView component.

Data Binding in TreeView

When you have a custom data source which may differ from internal data settings of the tree view, you can use data binding which will match the names of data fields in your data source with those used by the tree view.

By specifying the items property to point to your data object, along with dataFields property that holds an object that maps the names of fields in the data object, you can populate the TreeView using any kind of custom data source.

This feature is also usable when you need to load data on demand in the TreeView, from a remote data source.

How to Add/Remove Items Dynamically

To populate the TreeView component with data, you can either load data on demand from local or remote data source or add new items dynamically when required. In order to create a new item manually, you can use some of public methods available that allows you to insert an item at specific position in the tree view.

A sample that demonstrates how to add new items on demand is available here: Add Item Dynamically in TreeView Component.

Advanced Drag and Drop Operations

TreeView component comes with advanced drag drop that allows you to reorder items in tree hierarchy by simply dragging one or multiple items from one place to another within the same or other tree views.

During this process, events are fired that can help you to add custom actions that may alter the default built-in drag drop functionality. In each event, you can set up custom conditions that can prevent or allow drag drop in special cases, depending on your application requirements.

Related: Drag Drop Items Between Two TreeViews in Angular

Whenever an item is dragged, a dragging window will appear showing the target item and position at which item can be dropped. There are four possible positions:

• up arrow - states that item will be dropped above target item
• arc arrow - states that item will be dropped as a child of target item
• down arrow - states that item will be dropped below target item
• down arrow with a line - states that item will be dropped at the end of tree hierarchy

By default, during drag and drop items are moved from their original position to a new one. In some cases, instead of moving you may need to create a copy of dragged items. Copy operation is already built-in, you only need to press and hold the SHIFT key, when item is dropped. The dragging window will change its icon showing a + sign. This states that copy of dragged item will drop at specified position.

How to Select Multiple Tree items

By default, only one item is selectable in the TreeView. To enable multi selections, set the selectionMode property to either MultiSimple or MultiExtended value. This allows you to select multiple items using mouse and CTRL or SHIFT keys.

You can find more information and a sample here: Select Multiple Items in TreeView Component.

How to Customize the TreeView Appearance

You can modify the TreeView appearance using CSS. You can provide your own CSS classes that will override the default component appearance or change it using custom properties. For example:

[id="treeview-overview"] {
    --treeview-background: #fffbb5;
    --treeview-border: #thin solid #dbc89e;
    --treeitem-expand-box-margin: 4px 5px 0 0;
}
                    

In addition, you can also select a theme and apply it to your project settings. This will alter the TreeView appearance based on CSS settings from the theme.

Conclusion

IntegralUI TreeView is a web component that you can use in Angular, React and Vue and any other JavaScript framework. It allows you to display items in a tree hierarchy and reorder them dynamically using advanced drag and drop operations. You can populate the TreeView using custom data source, locally or remotely.

By default, each item contains only a label. Using item templates, you can add any custom HTML elements or other Web Components, like icons, checkboxes, editors etc.

You can customize the TreeView appearance by overriding default CSS classes with your own or choosing a different theme.

The TreeView component is part of IntegralUI Web.