The simplest and most common use for the TreeView control is navigation. The TreeView's hierarchical structure and auto-search functionality make it easy for users to drill-down and find the items they are interested in.

You can use the selectedItemChanged or itemClicked events for navigation. The difference is that selectedItemChanged occurs when the user moves the selection with the keyboard, and itemClicked occurs when the user clicks an item or presses the Enter key.

This example uses the itemClicked event:

Ready

Electronics

Trimmers/Shavers

Tablets

Phones

Apple

Motorola

Nokia

Samsung

Speakers

Monitors

Toys

Shopkins

Train Sets

Science Kit

Play-Doh

Crayola

Home

Coffeee Maker

Breadmaker

Solar Panel

Work Table

Propane Grill

// This file locates: "Scripts/Lesson/C1Nav/NavigationTrees.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
    theTree.itemClicked.addHandler(function (s, e) {
        var msg = document.getElementById('msg');
        msg.innerHTML = wijmo.format('Navigating to <b>** {Header} **</b>',
          s.selectedItem);
    });
});

// This file locates: "Content/css/Lesson/C1Nav/NavigationTrees.css".
/* default trees on this sample */
.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: NavigationTrees
        public ActionResult NavigationTrees()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.NavigationTrees_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.NavigationTrees_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.NavigationTrees_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.NavigationTrees_Text3)
</p>
 
<div id="msg" class="msg">@Html.Raw(Resources.C1Nav.NavigationTrees_Text4)</div>
@Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")