Initial State

By default, the TreeView expands the first node at each level and collapsed all others when it is bound to some data:

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

Selecting a default item

If you select an item when the tree loads, it will automatically ensure the selected node is visible, expanding the tree and scrolling as needed. In this case, we selected the 'Solar Panel' item:

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

Collapsing to a given Level

Use the collapseToLevel method to collapse or expand the tree to a given level when it loads. For example, the trees below start totally collapsed and totally expanded:

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

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/InitialState.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
 
    var theTreeSelected = wijmo.Control.getControl('#theTreeSelected');
    theTreeSelected.loadedItems.addHandler(function (s, e) {
        s.selectedItem = findItem(s.itemsSource, 'Solar Panel');
    });
 
    var theTreeCollapsed = wijmo.Control.getControl('#theTreeCollapsed');
    theTreeCollapsed.loadedItems.addHandler(function (s, e) {
        s.collapseToLevel(0);
    });
 
    var theTreeExpanded = wijmo.Control.getControl('#theTreeExpanded');
    theTreeExpanded.loadedItems.addHandler(function (s, e) {
        s.collapseToLevel(10);
    });
 
    // finds an item in a hierarchical array
    function findItem(arr, text) {
        for (var i = 0; arr && i < arr.length; i++) {
            if (arr[i].Header.indexOf(text) > -1) return arr[i];
            var item = findItem(arr[i].Items, text);
            if (item) return item;
        }
        return null;
    }
});

// This file locates: "Content/css/Lesson/C1Nav/InitialState.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display: block;
    width: 80%;
    max-height: 300px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    margin: 12pt;
    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: InitialState
        public ActionResult InitialState()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.InitialState_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.InitialState_Text1)
</p>
@Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
 
<h2>
    @Html.Raw(Resources.C1Nav.InitialState_Title1)
</h2>
<p>
    @Html.Raw(Resources.C1Nav.InitialState_Text2)
</p>
@Html.C1().TreeView().Id("theTreeSelected").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
 
<h2>
    @Html.Raw(Resources.C1Nav.InitialState_Title2)
</h2>
<p>
    @Html.Raw(Resources.C1Nav.InitialState_Text3)
</p>
@Html.C1().TreeView().Id("theTreeCollapsed").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")
@Html.C1().TreeView().Id("theTreeExpanded").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")