Demo - TreeView Properties

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="https://code.jquery.com/jquery-3.2.1.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="btnCollectCheckedNodes" class="btn btn-default">Collect Checked Nodes</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: [ // start with three lazy-loaded nodes
        { header: 'Lazy Node 1',isChecked: false,id:1, items: []},
        { header: 'Lazy Node 2',isChecked: false,id:2, items: [] },
        { header: 'Lazy Node 3',isChecked: false,id:3, items: [] }
    ],
    displayMemberPath: 'header',
    childItemsPath: 'items',
    expandOnClick: false,
    autoCollapse: false,
    lazyLoadFunction: function (node, callback) 
    {
    
     setTimeout(function () { // simulate http delay
            var result = [ // simulate result
                { header: 'Another lazy node...',isChecked: false,id:node.dataItem.id.toString() + '_1', items: [] },
                { header: 'A non-lazy node without children',id:node.dataItem.id.toString() + '_2',isChecked: false },
                { header: 'A non-lazy node with child nodes',id:node.dataItem.id.toString() + '_3',isChecked: false, items: [
                    { header: 'hello',isChecked: false,id:node.dataItem.id.toString() + '_3_1' },
                    { header: 'world',isChecked: false,id:node.dataItem.id.toString() + '_3_2' }
                ]}
            ];
            callback(result); // return result to control
        }, 2500); // 2.5sec http delay
    },
    formatItem: function (s, e) 
    {
    //debugger;
    var isNodeChecked = (e.dataItem.isChecked) ? 'checked="checked"' : '';
    //alert(isNodeChecked);
    debugger;
     e.element.innerHTML ='<input data-id="'+e.dataItem.id+'" id=\"chkSelectedNode\" type="checkbox" '+isNodeChecked+' class="CustomCheckboxInWijmoGrid">' + e.element.innerHTML             
    }
	});
  

    var host = theTree.hostElement;
    host.addEventListener('click', function(e)
    {
       if (wijmo.hasClass(e.target, "CustomCheckboxInWijmoGrid")) 
       {
         theTree.selectedNode.dataItem.isChecked = e.target.checked;
       }
    }, true);
    
   ...