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


    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:


    <input type="hidden" id="permissionTree" value="module_1:null, module_2:null, module_16:true, module_17:true">
    <div id='jqxTree'>
        <li id="module_1" item-expanded='true'>1 - Administration
          <li id="module_2" item-expanded='true'>2 - Modules                                                          
            <li id="module_16">16 - Add Module</li>
            <li id="module_17">17 - Edit Module</li>
            <li id="module_18">18 - Remove Modules</li>

    JS File:

           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.



    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:

    Best Regards,

    jQWidgets Team


    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.