How to Adjust TreeView Size Automatically

By default, TreeView component has virtualization active and auto size feature is disabled. With virtualization, you can have high performance and load and work with thousands of nodes. On the other hand when auto-sized, tree view can adjust its size based on number of visible items present in tree hierarchy. In this article, you will learn how to autosize the TreeView component.

As demo shows, whenever a node expands or collapses the TreeView height changes to show all visible nodes in the view. The width of the tree view can depends on parent container or it can be set in code.

How to Auto Size TreeView

The IntegralUI TreeView component has autoSize property that determines whether tree view size automatically adjusts to show all visible items or not. By default this property value is set to false, which means that auto sizing is disabled and virtualization is active. You can change this from HTML or in code:

• JavaScript
• Angular
• React
• Vue

When autosize is active, any change to the tree hierarchy by either adding or removing items, expanding or collapsing, drag and drop etc. will cause TreeView to adjust its size.

This feature is mostly useful, when you work with small number of nodes. Because, it will cause all item elements to appear in the DOM, which will affect performance.

Conclusion

When AutoSize is active, the TreeView component will automatically adjust its size to show all visible items into the view. Any change in tree view data will also cause auto sizing of the tree view. Finally, auto size feature is only viable with small number of nodes.

The TreeView component is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or any other JavaScript framework.