<h1>
    TreeView Architecture
</h1>

<p>
    The TreeView architecture is very simple, because it
    delegates a lot of the work to the browser's DOM.
</p>
<p>
    The control is 100% data-bound. The <b>itemsSource</b> property
    defines an array of data items that represent nodes and may
    contain child elements (as defined by the <b>childItemsPath</b>
    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.
</p>
<p>
    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).
</p>
<p>
    The TreeView has a <b>selectedItem</b> property that gets or sets
    the data item in the <b>itemsSource</b> array that is currently selected.
    It also has a <b>selectedNode</b> property that gets or sets the tree
    node that wraps the current item. You can use the <b>selectedNode</b>
    property to collapse, expand, or move the selection.
    You use the TreeView's <b>getNode</b> method to get a reference to
    the node that represents a given data item.
</p>
<p>
    To change the tree, you will normally change the <b>itemsSource</b>
    array and call the <b>loadTree</b> method to re-generate the nodes.
    The example below shows the performance of the TreeView when binding
    to sources of different sizes:
</p>

<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="cmbLevels">
            Levels:
        </label>
        @(Html.C1().ComboBox<int>().Id("cmbLevels").Bind(new[] { 1, 2, 3 }).SelectedValue(2))
        <br />
        <label for="cmbLevels">
            Nodes/Level:
        </label>
        @(Html.C1().ComboBox<int>().Id("cmbNodesPerLevel").Bind(new[] { 5, 10, 20, 40 }).SelectedValue(5))
        <br />
        <label></label>
        <button class="btn btn-primary" id="bind">
            Bind Tree
        </button>
        <div id="bindingMsg"></div>
    </div>
    <div class="col-xs-6">
        @Html.C1().TreeView().Id("theTree")
    </div>
</div>