How to Hide Unrelated Parent Items in Angular TreeView - Compact View

Created: 14 Oct 2019

Usually TreeView presents a tree hierarchy in full, showing all parent and child items in expanded or collapsed state. If you need to show only small part of the tree hierarchy, you can do it by using built-in or custom filters and display only relevant tree items. However, in some cases for improved navigation is better to show the TreeView data in Compact View.

Compact view means to show only a tree hierarchy that contains the selected items, its children, parent items and siblings, if any. All other unrelated parents or other items are excluded from the view. The IntegralUI TreeView component for Angular comes with built-in option to show tree hierarchy in compact view.

The demo above presents a tree hierarchy of different types of food. By selecting an item, the item is expanded and all unrelated parent items are hidden from the view, while showing only children and parent items that are closely related to the current selection. You can show item siblings, by collapsing the item.

To navigate to other item, simply click on its label. To show all root items, collapse the top parent item by clicking on its expand box.

Angular TreeView in Compact View

In cases of large tree hierarchies, to make better presentation of the tree data and provide fast navigation, it is best to display data in Compact View.

For example, online help documents have a very large tree hierarchy, and it may become overwhelming to the user to navigate among all help topics. Compact view solves this by showing only closely related data to the topic the user has currently selected. By choosing a different topic, the view changes dynamically. All irrelevant data is filtered out from the tree.

As you can see from the demo above, showing the TreeView in compact view you can quickly navigate through the tree hierarchy, while only presenting related data based on current selection.

To enable this mode, you only need to set the compactMode property of the Angular TreeView component to true. You can do this in HTML:

• HTML

<iui-treeview [items]="treeItems" [controlStyle]="treeStyle" [virtualMode]="true" [compactMode]="true" #treeview>
    <ng-template let-item>
          <span class="trw-comp-item-label">{{item.text}}</span>
    </ng-template>
</iui-treeview>
                            

Next, the only requirement is to select an item. In this example, the findItemById method is used to locate an item using its unique identifier. Once item is selected, the visual tree will change, all unrelated parent items and other items that are not relevant to the selected item, are hidden from the view.

• Angular

ngAfterViewInit(){
    this.treeview.loadData(this.flatData);

    // Initially the selection is set to Tropical Fruits
    this.treeview.selectedItem = this.treeview.findItemById(26);
}
                            

To initialize the TreeView in compact view (that is once page is loaded), you can select an item by handling the ngAfterViewInit event, like it is shown in sample code above.

Conclusion

IntegralUI TreeView is a component for Angular that comes with built-in compact view. It allows you to hide all unrelated data to particular topic while showing only a tree hierarchy with relevant data, based on user selection.

The TreeView component is part of IntegralUI Web.