Demo - TreeView Properties

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.nav.min.js"></script>
<div class="container">

  <h1>
    TreeView Properties
  </h1>
  <p>
    In addition to the data-binding properties that define the TreeView content, the control provides several properties that customize its behavior.</p>
  <p>
    This sample shows the effect of some of these properties:</p>

  <div class="row">
    <div class="col-xs-6">
      <div id="properties"></div>
      <button id="btnCollapse" class="btn btn-default">Collapse All</button>
      <button id="btnExpand" class="btn btn-default">Expand All</button>
    </div>
    <div class="col-xs-6">
      <div id="theTree">
      </div>
    </div>
  </div>
</div>

CSS

/* default trees on this sample */

.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);
}

.wj-combobox {
  width: 120px;
}

label {
  width: 160px;
  margin-bottom: 12px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create the tree
  var theTree = new wijmo.nav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items',
    expandOnClick: false
  });
  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];
  });


  var selectedelement = document.querySelector(".wj-state-selected");

  selectedelement.addEventListener('dblclick', function(e) {

    theTree.selectedNode.isCollapsed = !theTree.selectedNode.isCollapsed;
  });


  selectedelement.addEventListener('click', function(e) {

    e.cancel = true;
    e.stopPropagation();
    console.log(e);
  });




  // handle buttons


  // 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'
      }]
    }];
  }
}