Demo - TreeView Architecture

by c1alexi

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>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    TreeView Architecture
  </h1>

  <p>
    The TreeView architecture is very simple, because it 
    delegates a lot of the work to the browser's DOM.</p>
  <p>
    The control is 100% data-bound. The <b>itemsSource</b> property
    defines an array of data items that represent nodes and may
    contain child elements (as defined by the <b>childItemsPath</b>
    property).
    When one of the binding properties change, the control populates 
    its DOM by scanning the itemsSource array and creating DOM elements
    to represent the nodes.</p>
  <p>
    There is no virtualization, so the number of DOM elements remains 
    constant as the user scrolls the control, collapses or expands nodes.
    This is not a significant limitation since the TreeView supports 
    lazy-loading, which allows you to load data as the user requests it
    (by expanding the nodes).</p>
  <p>
    The TreeView has a <b>selectedItem</b> property that gets or sets
    the data item in the <b>itemsSource</b> array that is currently selected.
    It also has a <b>selectedNode</b> property that gets or sets the tree
    node that wraps the current item. You can use the <b>selectedNode</b>
    property to collapse, expand, or move the selection.
    You use the TreeView's <b>getNode</b> method to get a reference to 
    the node that represents a given data item.</p>
  <p>
    To change the tree, you will normally change the <b>itemsSource</b>
    array and call the <b>loadTree</b> method to re-generate the nodes.
    The example below shows the...

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: 120px;
  text-align: right;
  margin-bottom: 12px;
}
body {
  margin-bottom: 24pt;
}
.wj-node.wj-state-empty {
  display: inline-block
}

JavaScript

onload = function() {

	// select the number levels and nodes at each level
  var cmbLevels = new wijmo.input.ComboBox('#cmbLevels', {
  	itemsSource: [ 1, 2, 3 ],
    selectedValue: 2
	});
  var cmbNodesPerLevel = new wijmo.input.ComboBox('#cmbNodesPerLevel', {
  	itemsSource: [ 5, 10, 20, 40 ],
    selectedValue: 5
	});
  
	// create the tree
  var theTree = new wijmo.nav.TreeView('#theTree', {
  	itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items',
	});

	// re-bind tree
  document.getElementById('bind').addEventListener('click', function(e) {
  	var start = Date.now();
  	theTree.itemsSource = getData();
    theTree.loadTree(); // force immediate refresh
    var msg = wijmo.format('Bound to <b>{cnt:no}</b> nodes in <b>{ms:n0}</b> ms.', {
    	cnt: theTree.totalItemCount,
    	ms: Date.now() - start
    });
    document.getElementById('bindingMsg').innerHTML = msg;
  });
  // get the data
  function getData() {
  	var cnt = cmbNodesPerLevel.selectedValue,
    		levels = cmbLevels.selectedValue;
    		nodes = [];
    for (var i = 0; i < cnt; i++) {
    	nodes.push(getNode(0, i, cnt, levels))
    }
    return nodes;
  }
  function getNode(level, id, cnt, levels) {
  
  	// create node
  	var node = { 
    	header: 'Node ' + (level + 1) + '.' + (id + 1),
    };

		// create child nodes
    if (level < levels - 1) {
    	node.items = [];
      for (var i = 0; i < cnt; i++) {
      	node.items.push(getNode(level + 1, i, cnt, levels))
      }
    }
    
    // done
    return node;
  }
}