Demo - Wijmo TreeView

by LaAsCE

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>
<button onclick="change()">Change item source</button>
<hr>
<div class="container">

  <div id="theTree"></div>
  
  <div id="selection"></div>
  <div id="click"></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;
}

.wj-node select{
  float: right;
}
.wj-treeview .wj-nodelist .wj-node:before { 
    border: none;
}
.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node,
.wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist {
    font-size: 100%;
    border-left: 1px dashed ;
}

.separator::before {
    content: '--';
    margin-left: -10px;
    color: black;
}

JavaScript

var tree;
// get the tree data
function getData() {
  return [
    { header: 'Electronics', img: 'resources/electronics.png', items: [
      {header: 'Electronics 1'},
      {header: 'Electronics 2'},
      {header: 'Electronics 3'}]
    }
  ];
}
var newItemSource = [
      { header: 'Electronics', img: 'resources/electronics.png', items: [
        {header: 'Electronics 1'},
        {header: 'Electronics 2'},
        {header: 'Electronics 3'}]
      },
      { header: 'Camera', img: 'resources/electronics.png', items: [
        {header: 'Camera 1'},
        {header: 'Camera 2'},
        {header: 'Camera 3'}]
      }
    ];

var listSelected = [];

function change(){
    listSelected = tree.checkedItems;
		for (var index = 0; index < tree.nodes.length; index++) {
			if (tree.nodes[index].isChecked == true) {
				listSelected.push(tree.itemsSource[index]);
			}
		}
    
    if (tree.itemsSource != newItemSource) {
  		tree.itemsSource = newItemSource;  
    } else {
    	tree.itemsSource = getData();
    }
}

onload = function() {

//var oldFn = wijmo.nav.TreeNode.prototype.setChecked;
wijmo.nav.TreeNode.prototype.setChecked = function(checked) {
    let cb = this.checkBox;
        cb.checked = checked;
        cb.indeterminate = false;
}

  // create the tree
  	tree = new wijmo.nav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items',
    showCheckboxes: true,
    autoCollapse: false,
    expandOnClick: true,
    checkOnClick: false,
    selectedItemChanged: function(s, e) {
      var msg = wijmo.format('You selected item <b>{header}</b>.', s.selectedItem);
      document.getElementById('selection').innerHTML = msg;
    },
    itemClicked: function(s, e) {
      var msg = wijmo.format('You clicked item <b>{header}</b>.', s.selectedItem);
      document.getElementById('click').innerHTML = msg;
    },
    loadedItems: function (s, e) {
              s.collapseToLevel(1000);
        },
    formatItem:...