TreeView Properties

In addition to the data-binding properties that define the TreeView content, the control provides several properties that customize its behavior.

This sample shows the effect of some of these properties:

Parent 1

Child 1.1

Child 1.2

Child 1.3

Parent 2

Child 2.1

Child 2.2

Parent 3

Child 3.1

// This file locates: "Scripts/Lesson/C1Nav/MainProperties.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
    theTree.itemsSource = getData();
    theTree.selectedItem = theTree.itemsSource[0];
 
    // create checkboxes for the main properties
    var props = 'allowDragging,autoCollapse,expandOnClick,isAnimated,isReadOnly,showCheckboxes'.split(','),
          host = document.getElementById('properties'),
        tpl = '<label><input id="{prop}" type="checkbox"> {prop}</label>';
    props.forEach(function (prop) {
        var el = wijmo.createElement(tpl.replace(/\{prop\}/g, prop), host);
        el.querySelector('input').checked = theTree[prop];
    });
    host.addEventListener('click', function (e) {
        if (e.target instanceof HTMLInputElement) {
            theTree[e.target.id] = e.target.checked;
        }
    })
 
    // handle buttons
    document.getElementById('btnCollapse').addEventListener('click', function () {
        theTree.collapseToLevel(0);
    });
    document.getElementById('btnExpand').addEventListener('click', function () {
        theTree.collapseToLevel(100000);
    });
 
    // create some data
    function getData() {
        return [
            {
                header: 'Parent 1', items: [
                  { header: 'Child 1.1' },
          { header: 'Child 1.2' },
          { header: 'Child 1.3' }]
            },
      {
          header: 'Parent 2', items: [
          { header: 'Child 2.1' },
          { header: 'Child 2.2' }]
      },
      {
          header: 'Parent 3', items: [
          { header: 'Child 3.1' }]
      }
        ];
    }
});

// This file locates: "Content/css/Lesson/C1Nav/MainProperties.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    height: 350px;
    font-size: 120%;
    margin-top: 8px;
    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);
}
.demo-settings label{
    text-align: left;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: MainProperties
        public ActionResult MainProperties()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.MainProperties_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.MainProperties_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.MainProperties_Text2)
</p>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        <div id="properties"></div>
        <button id="btnCollapse" class="btn btn-default">@Html.Raw(Resources.C1Nav.MainProperties_Text3)</button>
        <button id="btnExpand" class="btn btn-default">@Html.Raw(Resources.C1Nav.MainProperties_Text4)</button>
    </div>
    <div class="col-xs-6">
        @Html.C1().TreeView().Id("theTree").DisplayMemberPath("header").ChildItemsPath("items")
    </div>
</div>