Demo - Wijmo Navigation Trees

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>


<div class="container">
    
  <div id="msg" class="msg">Ready</div>
  <div id="tree"></div>
  <button id="check">check
</button>
</div>

CSS

.msg {
  text-align: right;
  color: orange;
}
/* 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() {

var tree = new wijmo.nav.TreeView('#tree', {
   
    childItemsPath: 'items',
    allowDragging: true,
    itemsSource: [       
    { header: '0001' ,items :[{header:'0009'}]},
		{ header: '0002' },         
		{ header: '0003' },
		{ header: '0004' },
    ],
});
$("#check").click(function () {
   $("#tree .wj-node:contains('0009'):last").css('background-color', '#A1F2B9');
});


}