Home  » Help  » IntegralUI  » Web Components  » TreeView

Overview of IntegralUI TreeView for Angular

IntegralUI TreeView is a native Angular 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.

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

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

Above demonstration shows a simple tree hierarchy, each item has a checkbox, icon and an editable label. When item is hovered, a command button will appear on right side, which when clicked will open a text editor, where you can change the item label.

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.

How to Use IntegralUI TreeView in Angular

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:

public items: Array;

constructor(){
    this.items = [
        { 
            id: 1,
            text: "Favorites",
            icon: "computer-icons favorites",
            items: [
                { id: 11, pid: 1, text: "Desktop", icon: "computer-icons empty-doc" },
                { id: 12, pid: 1, text: "Downloads", icon: "computer-icons downloads", checkState: "checked" }
            ]
        },

        // . . . 
        // 
        // The full data set is available at https://stackblitz.com/edit/integralui-treeview-overview
        //
        
    ];
}
                            
<iui-treeview [items]="items">
    <ng-template let-item [iuiTemplate]="{ type: 'item' }">
        <span>{{item.text}}</span>
    </ng-template>
</iui-treeview>
                            

If you want to show item with different content then other items, you can use the ngSwitch or ngIf directives and set condition by which a different content will appear.

In this example, each item has a checkbox, icon, label, editor (represented by input element) and a command button on the right side. The editor is only visible when the button is clicked. After editing is completed or cancelled, the editor will disappear.

<iui-treeview [items]="items" #treeview>
    <ng-template let-item [iuiTemplate]="{ type: 'item' }">
        <div (mouseenter)="hoverItem=item" (mouseleave)="hoverItem=null">
            <span [ngClass]="getCheckBoxClass(item)" (mousedown)="checkItem($event, item)"></span>
            <span [ngClass]="item.icon"></span>
            <span *ngIf="item!=editItem">{{item.text}}</span>
            <input *ngIf="item==editItem" type="text" [(ngModel)]="item.text" (keydown)="editorKeyDown($event)" [iuiFocus]="editorFocused" (focus)="selectContent($event)" (blur)="editorLostFocus()" />
        </div>
    </ng-template>
    <ng-template let-item [iuiTemplate]="{ type: 'item-hover' }">
        <div class="toolbar">
            <span class="item-button item-button-edit" (click)="showEditor(item)"></span>
        </div>
    </ng-template>
</iui-treeview>
                            

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

Each part of IntegralUI TreeView component is fully customizable. There are different CSS classes for each component part. Although changing the attributes of built-in classes is possible, you can completely override them using the controlStyle property.

The controlStyle property accepts an object that holds all or partial list of CSS class names that will override the default CSS class names. For each component part, a different CSS class governs its appearance. This allows you to specify a set of different CSS classes for each component part and alter the appearance of the TreeView in whole. In this way, you can make it more suitable for your application requirements.

treeStyle = {
    general: {
        disabled: 'iui-treeview-disabled',
        focused: 'iui-treeview-focused',
        normal: this.generalClassName,
        hovered: 'iui-treeview-hovered',
        selected: 'iui-treeview-selected'
    },
    item: {
        general: {
            disabled: 'iui-treeitem-disabled',
            focused: 'iui-treeitem-focused',
            normal: 'iui-treeitem',
            hovered: 'iui-treeitem-hovered',
            selected: 'iui-treeitem-selected'
        },
        expandBox: {
            general: 'iui-treeitem-expand-box',
            load: 'iui-treeitem-expand-box-load',
            expanded: 'iui-treeitem-expand-box-open',
            collapsed: 'iui-treeitem-expand-box-close'
        },
        content: {
            disabled: 'iui-treeitem-content-disabled',
            focused: 'iui-treeitem-content-focused',
            normal: 'iui-treeitem-content',
            hovered: 'iui-treeitem-content-hovered',
            selected: 'iui-treeitem-content-selected'
        }
    }
}
                    

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 component 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 Angular 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.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.