Demo - TreeView Adding Nodes

by vaibhav saxena

HTML

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

  <h1>
    Adding Nodes
  </h1>
  <p>
    To add nodes to a tree, call the parent node's <b>addChildNode</b>
    method. To add nodes at the root level, call the TreeView's 
    <b>addChildNode</b> method.</p>
  <p>
    This is more efficient than adding data items to the 
    tree's <b>itemsSource</b> array and refreshing the tree by 
    calling the <b>loadTree</b> method.</p>

  <div class="row">
    <div class="col-xs-5">
      <div id="theTree">
      </div>
    </div>
    <div class="col-xs-7">
      <p>
        New Node Content: 
        <input class="form-control" id="theInput" value="My New Node">
      </p>
      <p>
        Add Node: 
        <button id="btnFirst" class="btn btn-default">First Child</button>
        <button id="btnLast" class="btn btn-default">Last Child</button>
      </p>
      <p>
        <button id="btnNoSel" class="btn btn-default">Remove Selection</button>
      </p>
    </div>
  </div>
</div>

CSS

/* default trees on this sample */
.wj-treeview {
    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);
}
body {
  margin-bottom: 24pt;
}

#theInput {
  font-weight: normal;
  display: inline-block;
  width: 12em;
}

JavaScript

onload = function() {

  // create the tree
  var theTree = new wijmo.nav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items'
  });
  theTree.selectedItem = theTree.itemsSource[0];

  // handle buttons
	document.getElementById('btnFirst').addEventListener('click', function () {
  	var newItem = { header: document.getElementById('theInput').value },
    		node = theTree.selectedNode;
		if (node) {
    		theTree.selectedNode = node.addChildNode(0, newItem);
		} else {
				theTree.selectedNode = theTree.addChildNode(0, newItem);
		}
	});
	document.getElementById('btnLast').addEventListener('click', function () {
  	var newItem = { header: document.getElementById('theInput').value },
    		node = theTree.selectedNode;
		if (node) {
    	var index = node.nodes ? node.nodes.length : 0;
    	theTree.selectedNode = node.addChildNode(index, newItem);
		} else {
    	var index = theTree.nodes ? theTree.nodes.length : 0;
    	theTree.selectedNode = theTree.addChildNode(index, newItem);
		}
	});
  document.getElementById('btnNoSel').addEventListener('click', function () {
  	theTree.selectedNode = null;
	});

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