Demo - TreeView Nodes

by Joel Parks

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>
    TreeView Nodes
  </h1>

  <p>
    In most cases, you can work with a TreeView using only its 
    data-binding and selection properties, and the original 
    data items bound to the tree.</p>
  <p>
    There are a few scenarios where you may need access to 
    properties of the <b>TreeNode</b> objects that make up
    the actual tree.</p>
  <p>
    You can get the <b>TreeNode</b> that corresponds to a given
    data item by calling the TreeView's <b>getNode</b> method,
    or use the <b>nodes</b> property to get the collection of
    root nodes on the TreeView.</p>
  <p>
    Once you have a node, you can use its properties and methods
    to inspect or modify the tree. These properties and methods
    include:</p>
  <ul>
    <li>
      <b>dataItem</b>: Gets the item in the data source that is
      bound to this node.</li>
    <li>
      <b>element</b>: Gets the HTML element that represents this
      node.</li>
    <li>
      <b>ensureVisible</b>: Expands parent nodes and scrolls the
      TreeView as needed to ensure the node is currently visible.</li>
    <li>
      <b>select</b>: Selects the node and ensures it is visible.</li>
    <li>
      <b>parentNode</b>: Gets a reference to the node's parent node.</li>
    <li>
      <b>index</b>: Gets the index of this node in the node collection
      that contains it.</li>
    <li>
      <b>level</b>: Gets the node's level in the outline structure.
      Top level nodes have level zero.</li>
    <li>
      <b>nodes</b>: Gets an array containing the node's child nodes.</li>
    <li>
      <b>previous, next,...

CSS

.node-info {
  font-size: 70%;
  font-style: italic;
}

/* 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);
}

.wj-node : before {
  text-align: left;
}

.wj-combobox {
  width: 120px;
}

label {
  width: 120px;
  text-align: right;
  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',
    rightToLeft: true,
	});

	// scan visible nodes now and when the user clicks the button
	scanNodes(true);
  document.getElementById('scan').addEventListener('click', function(e) {
  	scanNodes(true);
	});
  
	// scan nodes and show their information
	function scanNodes(visible) {
  	var result = '',
    		cnt = 0;
  	for (var node = theTree.nodes[0]; node; node = node.next(visible)) {
    	cnt++;
      result += 
      	wijmo.format('{header}', node.dataItem) +
      	wijmo.format(' <span class="node-info">(level: {level}, index: {index}, isCollapsed: {isCollapsed})</span><br/>', node);
    }
    document.getElementById('result').innerHTML = result;
  }
  
  // get the tree data
  function getData() {
		return [
    	{ header: 'Electronics', img: 'resources/electronics.png', items: [
				{ header: 'Trimmers/Shavers' },
        { header: 'Tablets' },
        { header: 'Phones', img: 'resources/phones.png', items: [
					{ header: 'Apple' },
          { header: 'Motorola', newItem: true },
          { header: 'Nokia' },
          { header: 'Samsung' }]
				},
        { header: 'Speakers', newItem: true },
        { header: 'Monitors' }]
			},
      { header: 'Toys', img: 'resources/toys.png', items: [
      	{ header: 'Shopkins' },
        { header: 'Train Sets' },
        { header: 'Science Kit', newItem: true },
        { header: 'Play-Doh' },
        { header: 'Crayola' } ]
			},
			{ header: 'Home', img: 'resources/home.png', items: [
      	{ header: 'Coffee Maker' },
        { header: 'Breadmaker', newItem: true },
        { header: 'Solar Panel', newItem: true },
        { header: 'Work Table' },
        { header: 'Propane Grill' }]
			}
		];
	}
}