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

  
theTree.hostElement.addEventListener("click",function(e){

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

theTree.hostElement.addEventListener("dblclick",function(e){

	theTree.selectedNode.isCollapsed=!theTree.selectedNode.isCollapsed;
})
  // 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' }]
			}
		];
	}
}