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.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows auto sizing of tree view to fit its content.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
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.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
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:
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.
TreeView is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.