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.
Further, the TreeView control supports the following keyboard commands:
| Key Combination | Action |
|---|---|
| Up/Down | Select the previous or next visible node |
| Left | Collapse the selected node if it has child nodes, select the parent node otherwise |
| Right | Expand the selected node if it has child nodes |
| Home/End | Select the first or last visible nodes |
| Space | Toggle the checkbox in the current node (see the showCheckboxes property) |
| Other characters | Search for nodes that contain the typed text (multi-character auto-search) |