@model IEnumerable<TreeViewData>

<h1>
    C1 MVC TreeView
</h1>
<p>
    The <b>TreeView</b> control shows hierarchical data. It enables
    users to collapse or expand nodes, select items, load, search,
    and edit data, and to use drag and drop gestures to re-organize
    the items if needed.
</p>
<p>
    To use the <b>TreeView</b> control, you will normally use the
    following three properties:
</p>
<ol>
    <li>
        <b>itemsSource</b> defines the array that contains the hierarchical data.
        Each item in the array contains information about a node and (optionally)
        an array of child nodes.
    </li>
    <li>
        <b>displayMemberPath</b> defines the name of the property in the items
        that contains the text to be displayed in the tree nodes. By default,
        this property is set to the string 'header'.
    </li>
    <li>
        <b>childItemsPath</b> defines the name of the property in the items that
        contains the array of child nodes. By default, this property is set to the
        string 'items'.
    </li>
</ol>
<p>
    Once the tree is set up, use the <b>itemClicked</b> or
    <b>selectedItemChanged</b> events to track user actions and handle them
    with the <b>selectedItem</b> property.
</p>
<p>
    For example, the <b>TreeView</b> below shows a hierarchical list of
    products. Users may expand nodes by clicking the collapsed icons,
    or by pressing the right-arrow key when a node is selected.
</p>

@Html.C1().TreeView().Id("theTree")

<div id="selection"></div>
<div id="click"></div>