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

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

This example uses the OnClientItemClicked event for navigation. The below example code uses Property model added in the QuickStart section.

In Code

NavigationController.cs

public class TreeViewController : Controller
    {
        // GET: TreeView
        public ActionResult Index()
        {
            return View(Property.GetData(Url));
        }        
    }

Navigation.cshtml

@using <ApplicationName.Models>
@model Property[]

<script type="text/javascript">
function itemClicked(treeView) 

{
document.getElementById('tvNavItem').innerHTML = 'Navigating to <b> *** ' + treeView.selectedItem.Header + ' ***</b>';
}
</script>

@(Html.C1().TreeView()
    .Bind(Model)
    .DisplayMemberPath("Header")
    .ChildItemsPath("Items")
    .OnClientItemClicked("itemClicked"))

<div id="tvNavItem" style="background-color:yellow"></div>

Mouse Navigation

The following table lists the actions and the corresponding Mouse commands for navigating nodes in TreeView:

Keyboard Navigation

The following table describes the actions and their associated keys to use when navigating nodes in TreeView: