How to populate saved checkbox/tree states in jqxtree

[webwurxParticipant]

Hi,

I am pretty new to jqwidgets and I find jqxtree interesting and will fit to my ongoing project. I managed to render the jqxtree and saved their states in idname:state format (ie., module_1:null, module_2:true, etc). However, I have a problem populating my rendered jqxtree lists with that of the saved states. Below is my code:

html:

<input type="hidden" id="permissionTree" value="module_1:null, module_2:null, module_16:true, module_17:true">

<div id='jqxTree'>
  <ul>                  
    <li id="module_1" item-expanded='true'>1 - Administration
     <ul>
      <li id="module_2" item-expanded='true'>2 - Modules                                                          
      <ul>
        <li id="module_16">16 - Add Module</li>
        <li id="module_17">17 - Edit Module</li>
        <li id="module_18">18 - Remove Modules</li>
      </ul>
      </li>
  </ul>
</div>

JS File:

 $('#jqxTree').jqxTree({
       height: '300px',
       width: '400px',
       theme: 'energyblue',
       checkboxes: true
   });

    var getPermissionTree = $('#permissionTree').val();
    var arrPTree = getPermissionTree.split(', ');

    var arrMods = [];
    for(key in arrPTree){
        var rowPermission = arrPTree[key].split(':');
        arrMods[rowPermission[0]] = rowPermission[1];        
    }

   var items = $('#jqxTree').jqxTree('getItems');
    for (var item in items) {
        var currentItem = items[item];        
        $("#jqxTree").jqxTree('checkItem', currentItem.id, arrMods[currentItem.id]);
    }

I am not sure if I am doing it right, but I will appreciate it if you point me to the right direction.

Thanks.

[ChristopherParticipant]

Hi webwurx,

The problem is that “arrMods[currentItem.id]” returns a String, but the “checkItem” method accepts a Boolean as it’s third parameter. Here is the solution:
https://www.jseditor.io/?key=xb-tree

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[webwurxParticipant]

Hi Christopher,

That works great! I just made a minor modification to accommodate undetermined states:

for(var mod in arrMods)
 {
   if(arrMods[mod] === 'true')
     $("#jqxTree").jqxTree('checkItem', $('#'+mod)[0], true);
   else if(arrMods[mod] === 'false') {
      $("#jqxTree").jqxTree('checkItem', $('#' + mod)[0], false);
    } else {
      $("#jqxTree").jqxTree('checkItem', $('#' + mod)[0], null);
    }
  }

Thanks a lot!

[Author]

Posts