jQuery UI Widgets Forums Navigation Tree How to populate saved checkbox/tree states in jqxtree

This topic contains 2 replies, has 2 voices, and was last updated by  webwurx 7 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • webwurx
    Participant

    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.


    Christopher
    Participant

    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


    webwurx
    Participant

    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!

    • This reply was modified 7 years, 10 months ago by  webwurx.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.