Demo - TreeView Node Checkboxes

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>
    Node Checkboxes</h1>

  <p>
    Set the <b>showCheckboxes</b> property to true and the TreeView will
    add checkboxes to each node.</p>
  <p>
    When checkboxes are displayed, the TreeView manages their
    hierarchy so that when a checkbox is checked or cleared, the new
    value is automatically applied to all child nodes, and reflected
    on the state of the parent nodes.</p>
  <p>
    When items are checked or unchecked, the <b>checkedItemsChanged</b>
    event is raised, and the <b>checkedItems</b> property is updated
    with a list of the items that are currently checked:</p>

  <div id="theTree"></div>
  <button id="btnCheckAll" class="btn btn-default">
    Check All
  </button>
  <button id="btnUncheckAll" class="btn btn-default">
    Uncheck All
  </button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button id="btnSaveState" class="btn btn-default">
    Save State
  </button>
  <button id="btnRestoreState" class="btn btn-default">
    Restore State
  </button>
  
  <div id="tvChkStatus"></div>    
</div>

CSS

/* default trees on this sample */
.wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    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;
}

JavaScript

onload = function() {

	// create the tree
  var tree = new wijmo.nav.TreeView('#theTree', {
  	itemsSource: getData(),
		displayMemberPath: 'header',
    childItemsPath: 'items',
		showCheckboxes: true,
    
    // show checked items below the tree
		checkedItemsChanged: function(s, e) {
    	console.log(s);
    	if(s.selectedNode.hasChildren == true) {
      	console.log('Has children nodes...');
        console.log(s.selectedNode.nodes);
        for(var i = 1; i < s.selectedNode.nodes.length; i++) {
        	s.selectedNode.nodes[i].isChecked = false;
        }
      }
		}
	});
  
  // handle buttons
  document.getElementById('btnCheckAll').addEventListener('click', function(e) {
  	tree.checkAllItems(true);
  });
  document.getElementById('btnUncheckAll').addEventListener('click', function(e) {
  	tree.checkAllItems(false);
  });
  document.getElementById('btnSaveState').addEventListener('click', function(e) {
  	checkedItems = tree.checkedItems || [];
  });
  document.getElementById('btnRestoreState').addEventListener('click', function(e) {
  	tree.checkedItems = checkedItems;
  });
  
  // get the tree data
  function getData() {
		return [
    	{ header: 'Electronics', items: [
				{ header: 'Trimmers/Shavers' },
        { header: 'Tablets' },
        { header: 'Phones', items: [
					{ header: 'Apple' },
          { header: 'Motorola', newItem: true },
          { header: 'Nokia' },
          { header: 'Samsung' }]
				},
        { header: 'Speakers', newItem: true },
        { header: 'Monitors' }]
			},
      { header: 'Toys', items: [
      	{ header: 'Shopkins' },
        { header: 'Train Sets' },
        { header: 'Science Kit', newItem: true },
        { header: 'Play-Doh' },
        { header: 'Crayola' } ]
			},
			{ header: 'Home', items: [
      	{ header: 'Coffeee Maker' },
        { header: 'Breadmaker', newItem: true },
        { header: 'Solar Panel', newItem: true },
        { header: 'Work Table' },
        { header: 'Propane Grill'...