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. The displayMemberPath property defines the name of the property in the items that contains the text to be displayed in the tree nodes.

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 on expanding a particular node.

The TreeView has a selectedItem property that gets or sets the currently selected data item in the itemsSource array. 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 can use the getNode method to get a reference to the node that represents a given data item.

To change the tree, change the itemsSource array and call the loadTree method to re-generate the nodes.

The TreeView control includes both single-select and multi-select capabilities:

• allowMultiSelect: A boolean property that enables multi-select when set to true. The default value is false, which provides single node selection behavior.

• selectedNodes: A property that retrieves the list of all currently selected nodes when multi-select is enabled.

Further, the TreeView control supports the following keyboard commands: