Wijmo 5 PureJS - TreeView

A TreeView Sample for Wijmo 5 in PureJS

by Joel Parks

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>
      <button id="btnSelect" class="btn btn-default">Select Node</button>
      <button id="disExpand" class="btn btn-default">Expand/Collapse Disabled Node</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'
  });
  theTree.selectedItem = theTree.itemsSource[0];
  theTree.collapseToLevel(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;
    }
  })

  theTree.nodes[0].isDisabled = true;

  // handle buttons
  document.getElementById('btnCollapse').addEventListener('click', function() {
    theTree.collapseToLevel(0);
  });
  document.getElementById('btnExpand').addEventListener('click', function() {
    theTree.collapseToLevel(100000);
  });
  document.getElementById('btnSelect').addEventListener('click', function() {
    theTree.nodes[2].select();
  });
  document.getElementById('disExpand').addEventListener('click', function() {
    if (theTree.nodes[0].isCollapsed == false) {
      theTree.nodes[0].isDisabled = false;
      theTree.nodes[0].isCollapsed = true;
      theTree.nodes[0].isDisabled = true;
    } else {
      theTree.nodes[0].isDisabled = false;
      theTree.nodes[0].isCollapsed = false;
      theTree.nodes[0].isDisabled = true;
    }
  });

  // create some data
  function getData() {
    return [{
        header: 'Parent 1',
        items: [{
            header: 'Child 1.1'
          },
          {
            header: 'Child 1.2'
          },
          {
            header: 'Child 1.3'
          }
        ]
      },
      {
        header:...