C1 MVC TreeView

The TreeView 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.

To use the TreeView control, you will normally use the following three properties:

itemsSource 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.
displayMemberPath 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'.
childItemsPath 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'.

Once the tree is set up, use the itemClicked or selectedItemChanged events to track user actions and handle them with the selectedItem property.

For example, the TreeView 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.

// This file locates: "Scripts/Lesson/C1Nav/Index.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
    tree.itemsSource = getData();
    tree.displayMemberPath = 'header';
    tree.childItemsPath = 'items';
    tree.selectedItemChanged.addHandler(function (s, e) {
        var msg = wijmo.format('You selected item <b>{header}</b>.', s.selectedItem);
        document.getElementById('selection').innerHTML = msg;
    });
    tree.itemClicked.addHandler(function (s, e) {
        var msg = wijmo.format('You clicked item <b>{header}</b>.', s.selectedItem);
        document.getElementById('click').innerHTML = msg;
    });

    // get the tree data
    function getData() {
        return [
        { header: 'Electronics', img: 'resources/electronics.png', items: [
            { header: 'Trimmers/Shavers' },
            { header: 'Tablets' },
            { header: 'Phones', img: 'resources/phones.png', items: [
                { header: 'Apple' },
                { header: 'Motorola', newItem: true },
                { header: 'Nokia' },
                { header: 'Samsung' }]
            },
            { header: 'Speakers', newItem: true },
            { header: 'Monitors' }]
        },
        { header: 'Toys', img: 'resources/toys.png', items: [
            { header: 'Shopkins' },
            { header: 'Train Sets' },
            { header: 'Science Kit', newItem: true },
            { header: 'Play-Doh' },
            { header: 'Crayola' }]
        },
        { header: 'Home', img: 'resources/home.png', items: [
            { header: 'Coffeee Maker' },
            { header: 'Breadmaker', newItem: true },
            { header: 'Solar Panel', newItem: true },
            { header: 'Work Table' },
            { header: 'Propane Grill' }]
        }];
    }
});

// This file locates: "Content/css/Lesson/C1Nav/Index.css".
.demo-control .wj-treeview {
    display:block;
    /*height: 350px;*/
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Index
        public ActionResult Index()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>

<h1>
    @Html.Raw(Resources.C1Nav.Index_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.Index_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Index_Text2)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1Nav.Index_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Index_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1Nav.Index_Text5)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1Nav.Index_Text6)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Index_Text7)
</p>

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

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