More Samples
Download Wijmo

TreeView Architecture

The TreeView architecture is very simple, because it delegates a lot of the work to the browser's DOM.

The control is 100% data-bound. The itemsSource property defines an array of data items that represent nodes and may contain child elements (as defined by the childItemsPath property). When one of the binding properties change, the control populates its DOM by scanning the itemsSource array and creating DOM elements to represent the nodes.

There is no virtualization, so the number of DOM elements remains constant as the user scrolls the control, collapses or expands nodes. This is not a significant limitation since the TreeView supports lazy-loading, which allows you to load data as the user requests it (by expanding the nodes).

The TreeView has a selectedItem property that gets or sets the data item in the itemsSource array that is currently selected. It also has a selectedNode property that gets or sets the tree node that wraps the current item. You can use the selectedNode property to collapse, expand, or move the selection. You use the TreeView's getNode method to get a reference to the node that represents a given data item.

To change the tree, you will normally change the itemsSource array and call the loadTree method to re-generate the nodes. The example below shows the performance of the TreeView when binding to sources of different sizes: