Wijmo Tree Node Update

containing wijmo elements

HTML

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

<h2>
 Wijmo Tree Node Update
</h2>

<button id="button1" class="btn btn-primary">Toggle Node</button>

<div id="tree"></div>

</div>

CSS

.flag-on { color: green; font-weight: bold;}
.flag-off { color: blue; font-weight: normal;}

JavaScript

let data = 
[
  {
    header: 'Parent 1',
    flag: 0,
    items: [
      { header: 'Child 1.1', flag: 0 },
      { header: 'Child 1.2', flag: 1 },
      { header: 'Child 1.3', flag: 0 }
    ]
  },
  {
    header: 'Parent 2',
    flag: 1,
    items: [
      { header: 'Child 2.1', flag: 1 },
      { header: 'Child 2.2', flag: 0 }
    ]
  },
];

// create tree
var theTree = new wijmo.nav.TreeView('#tree', {
    itemsSource: data,
    displayMemberPath: 'header',
    childItemsPath: 'items',
		autoCollapse: false,
		expandOnClick: false,
    formatItem: function(s,e) {
    	wijmo.toggleClass(e.element, "flag-on", (e.dataItem.flag == 1));
    	wijmo.toggleClass(e.element, "flag-off", (e.dataItem.flag == 0));
    }
  });
// show popup on button click
document.getElementById('button1').addEventListener('click', function() {
	var flip = (theTree.selectedNode.dataItem.flag == 1) ? 0 : 1;
  //alert('changing flag on ' + theTree.selectedNode.dataItem.header + ' to ' + flip);
	theTree.selectedNode.dataItem.flag = flip;
  theTree.selectedNode.refresh();
  theTree.loadTree(true);
});