JavaScript Tree

Set the source property of the jqxTree. Author: http://jqwidgets.com

by redoak2000

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="dropDownButton">
  <div id='jqxTree' style='border: none;'>

  </div>
</div>

JavaScript

var source = [{
       label: "Mail",
       expanded: true,
       items: [{
           label: "Calendar"
       }, {
           label: "Contacts",
           selected: true
       }]
   }, {
       label: "Inbox",
       expanded: true,
       items: [{
           label: "Admin"
       }, {
           label: "Corporate"
       }, {
           label: "Finance"
       }, {
           label: "Other"
       }, ]
   }, {
       label: "Deleted Items"
   }, {
       label: "Notes"
   }, {
       iconsize: 14,
       label: "Settings"
   }, {
       label: "Favorites"
   }, ];
   // create jqxTree
   $("#dropDownButton").jqxDropDownButton({enableBrowserBoundsDetection:true,autoOpen: true, width: 250, height: 25,theme:'bootstrap'});
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + item.label + '</div>';
                //$("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
            });   
$('#jqxTree').on('checkChange', function (event) 
{
    var args = event.args;
    var element = args.element;
    var checked = args.checked;
    console.log("checkChange" + JSON.stringify(element));
	  var items = $('#jqxTree').jqxTree('getCheckedItems');    
    console.log("getCheckedItems" + JSON.stringify(items.length));
    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 2px;">' + 
    	'selected ' + items.length + ' items' + '</div>';    
    $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
              
});            
   $('#jqxTree').jqxTree({
       source: source,
       checkboxes:true,
       incrementalSearch:true,
       hasThreeStates:true,
       width: 250,
       theme:'bootstrap'

   });