TreeView like VS Toolbox

Usually visual representation of tree hierarchy in TreeView component 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 tree view that appears as VS Toolbox, where tree hierarchy appears is shown a flat list.

A sample code that shows TreeView to look like VS Toolbox is available in JavaScript, Angular, React and Vue, in following sections below.

In above demonstration, the TreeView appears like an Accordion or in similar way like VS Toolbox. Root items behave like group headers and their content is a list of child items.

Although in this example there is only one level of tree hierarchy, you can add child items at deeper level. However, they will all align with zero indentation.

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

How to Remove Indentation in TreeView

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

• JavaScript
• Angular
• React
• Vue

By setting the indent value to 0, all items in the TreeView will appear on the same level, as they are root items.

Create TreeView to Appear as VS Toolbox

Next, you need to distinguish the root items from the child items by modifying their styles. In this example, root items will behave as containers or like accordion groups, and will appear differently than their children.

Each part of TreeView has a CSS class that specifies their appearance. In case where some tree items behave and appear differently than others (like in this example), you need to modify default CSS classes with custom settings.

• JavaScript
• Angular
• React
• Vue

In this case, all root items have their style set in code for each state: normal, hovered and selected. In addition, the expand box appearance is changed via CSS so that instead of an arrow a plus and minus icon is used for collapsed and expanded states.

Open Root Tree Items on Click

Now only remains to make sure root items will expand on click. You can handle the afterSelect event and expand the item. In addition, if a child item is clicked , you also need to update the appareance of parent root item to appear as selected.

• JavaScript
• Angular
• React
• Vue

Finally, when a new item is selected, teh appearance of previously selected parent group resets to default. For this purpose, you can handle the beforeSelect event.

• JavaScript
• Angular
• React
• Vue

Conclusion

With modification of existing CSS styles and applying custom styles to tree items, you can make TreeView to appear as VS Toolbox. In addition, small changes to the TreeView behavior are added using some code and handling few events. The result is a flat TreeView with zero indentation, which acts and behaves like a Visual Studio Toolbox.

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