@model IEnumerable<TreeViewData>

<h1>
    TreeView Nodes
</h1>

<p>
    In most cases, you can work with a TreeView using only its
    data-binding and selection properties, and the original
    data items bound to the tree.
</p>
<p>
    There are a few scenarios where you may need access to
    properties of the <b>TreeNode</b> objects that make up
    the actual tree.
</p>
<p>
    You can get the <b>TreeNode</b> that corresponds to a given
    data item by calling the TreeView's <b>getNode</b> method,
    or use the <b>nodes</b> property to get the collection of
    root nodes on the TreeView.
</p>
<p>
    Once you have a node, you can use its properties and methods
    to inspect or modify the tree. These properties and methods
    include:
</p>
<ul>
    <li>
        <b>dataItem</b>: Gets the item in the data source that is
        bound to this node.
    </li>
    <li>
        <b>element</b>: Gets the HTML element that represents this
        node.
    </li>
    <li>
        <b>ensureVisible</b>: Expands parent nodes and scrolls the
        TreeView as needed to ensure the node is currently visible.
    </li>
    <li>
        <b>select</b>: Selects the node and ensures it is visible.
    </li>
    <li>
        <b>parentNode</b>: Gets a reference to the node's parent node.
    </li>
    <li>
        <b>index</b>: Gets the index of this node in the node collection
        that contains it.
    </li>
    <li>
        <b>level</b>: Gets the node's level in the outline structure.
        Top level nodes have level zero.
    </li>
    <li>
        <b>nodes</b>: Gets an array containing the node's child nodes.
    </li>
    <li>
        <b>previous, next, previousSibling, nextSibling</b>:
        Get references to adjacent nodes on the tree, optionally excluding
        collapsed or non-sibling nodes.
    </li>
    <li>
        <b>isChecked, isCollapsed, isDisabled:</b> Get or set values that
        change the state of the node.
    </li>
</ul>

<p>
    For example, click the button below to scan the <i>visible</i>
    nodes on the TreeView. Try expanding and collapsing some
    nodes to see the difference when you click the button:
</p>

<div class="row demo-settings">
    <div class="col-xs-5">
        @Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
    </div>
    <div class="col-xs-7">
        <div id="scan" class="btn btn-primary">
            Scan Visible Nodes
        </div>
        <h4>
            Visible Nodes:
        </h4>
        <div id="scanResult"></div>
    </div>
</div>