TreeView like Toolbox in AngularJS

Created: 22 December 2015

Usually visual representation of tree hierarchy in Angular TreeView directive is created by shifting the child items to the right with small indentation relative to its parent. By removing this indentation, you can create a toolbox like tree view, where tree hierarchy will appear as flat list.

TreeView directive is part of IntegralUI Studio for Weba suite of UI Components for development of web apps

In above demonstration, we have a TreeView that appears like an Accordion. Root items behave like group headers and their content is a list of child items.

Note Although in this example we have only a one level tree hierarchy, you can add child items to the child items. All will be aligned with zero indentation.

How to Remove Indentation from Angular TreeView

In order to remove the indentation of tree items, we will use the indent property. This property by default is set to 15, which determines how many pixels the child item is shifted in relation to its immediate parent.

By setting this property value to 0, all items in the Angular TreeView will appear on the same line, as they are root items.

Create TreeView to Appear as Toolbox

Next, we need to distinguish the root items from the child items by modifying their styles. In our example, root items will behave as blocks, and will appear differently than their children. This is accomplished by changing default CSS styles:

Each part of Angular TreeView directive has a CSS class which specifies their appearance. In case where some tree items will behave and appear differently than others (like in our example), we need to create custom CSS classes and apply them to specified items.

Here we have a set for CSS classes for parent and another set for child items. All these classes are applied through code.

To find which item is clicked, we are using the getItemAt method, which accepts the mouse position in page coordinates. The itemClick event carries the position of mouse cursor, so we can use it to find out which item is clicked. If there is an item, it will expand or collapse its content.

We are also handling the beforeSelect and afterSelect events, to make sure the appearance of parent items is updated whenever a child item is selected.

Conclusion

By modification of existing CSS styles and creating new custom CSS classes, we have been able to create a toolbox like TreeView. In addition, small changes to the TreeView behavior was added using AngularJS code and handling few events. The result is a flat TreeView with zero indentation, which acts and behaves like a Visual Studio Toolbox.

Tab content switching

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.