Two tree Views to move items between

[MarinaParticipant]

Hi,
I have two tree views on page and i need to move elements from one tree to another tree based on checked checkboxes and vs versa.
Elements needs to be put in right hierarchy.
I wrote the code but its not working as expected, seems elements copied and causing failure.
Do you have any examples on this topic?
here is my code for move items function:

     function movetreeviewitems(source, destination) {

         var sourceItems = $(source).jqxTree('getCheckedItems');
         var destinationitems =  $(destination).jqxTree('getItems');
         var bfoundparent = false;
         var bfoundcategory = false;
         var bfoundcompany = false;
         var assigneditemsparent;

         //var sourceItemsCount = 0;
         //var destinationItemsCount = 0;

         //sourceItemsCount = $(source).jqxTree('getItems').length;
         //destinationItemsCount = $(destination).jqxTree('getItems').length;

        var destinationItemsMaxID = 0;
                    for (var n = 0; n < destinationitems.length; n++) {//loop through assigned elements to find max id
                        if (Number(destinationitems[n].id) > Number(destinationItemsMaxID)) {
                            destinationItemsMaxID = Number(destinationitems[n].id);
                        }
                    }

        console.log("destinationItemsMaxID", destinationItemsMaxID);

         mainloop:
         for (var i = 0; i < sourceItems.length; i++) {
            

             var item = sourceItems[i];
             destinationitems = $(destination).jqxTree('getItems');

             console.log("item", item);
             console.log("item parent element", item.parentElement);
             console.log("parent item", $(source).jqxTree('getItem', item.parentElement));

             bfoundcategory = false;
             bfoundcompany = false;
             bfoundparent = false;

             var itemcompanyid, itemcategoryid, categoryelement, companyelement, categoryitem, companyitem, itemelement;
             itemelement = item.element;

             //**********************************USER LEVEL *************************************
             if (item.level == 2) {
                 console.log("PROCESS USER ITEM");
                 //strUsers += item.value + ",";
                 categoryelement = item.parentElement;
                 companyelement = $(source).jqxTree('getItem', categoryelement).parentElement;

                 if (!bfoundcategory) {
                     looptofindDispatchersParent:
                     for (var m = 0; m < destinationitems.length; m++) {//loop through assigned elements to see if parents there
                         //console.log(destinationitems[m].level, destinationitems[m].label, destinationitems[m].value);
                         //console.log($('#jqxTreeUnassigned').jqxTree('getItem', categoryelement).label, $('#jqxTreeUnassigned').jqxTree('getItem', categoryelement).value);
                         if (destinationitems[m].level == 1 &&
                                    destinationitems[m].label == $(source).jqxTree('getItem', categoryelement).label &&
                                    destinationitems[m].value == $(source).jqxTree('getItem', categoryelement).value) {
                             assigneditemsparent = destinationitems[m].element;
                             bfoundcategory = true;
                             break looptofindDispatchersParent;
                         }
                     }
                 }
                 console.log("foundcategory", bfoundcategory);
                 if (bfoundcategory) {
                     destinationItemsMaxID = destinationItemsMaxID + 1;
                     $(destination).jqxTree('addTo', { label: item.label, value: item.value, id: destinationItemsMaxID }, assigneditemsparent);
                     destinationitems = $(destination).jqxTree('getItems');

                 }
                 else {
                     destinationItemsMaxID = destinationItemsMaxID + 1;

                     if (!bfoundcompany) {
                         looptofindcompany:
                         for (var k = 0; k < destinationitems.length; k++) {//loop through assigned elements to see if parents there
                             //console.log(destinationitems[j].level, destinationitems[j].label, destinationitems[j].value);
                             //console.log($('#jqxTreeUnassigned').jqxTree('getItem', companyelement).label, $('#jqxTreeUnassigned').jqxTree('getItem', companyelement).value);
                             if (destinationitems[k].level == 0 &&
                                            destinationitems[k].label == $(source).jqxTree('getItem', companyelement).label &&
                                            destinationitems[k].value == $(source).jqxTree('getItem', companyelement).value) {
                                 assigneditemsparent = destinationitems[k].element;
                                 bfoundcompany = true;
                                 break looptofindcompany;
                             }
                         }
                     }

                     console.log("bfoundcompany", bfoundcompany);
                     if (bfoundcompany) {//add only category to company
                         destinationItemsMaxID = destinationItemsMaxID + 1;
                         $(destination).jqxTree('addTo', { label: $(source).jqxTree('getItem', categoryelement).label, value: $(source).jqxTree('getItem', categoryelement).value, id: destinationItemsMaxID }, assigneditemsparent);
                         var addedcategory = $(destination).jqxTree('getItem', $('#' + destinationItemsMaxID)[0]);
                         destinationItemsMaxID = destinationItemsMaxID + 1;
                         $(destination).jqxTree('addTo', { label: item.label, value: item.value, id: destinationItemsMaxID }, addedcategory);
                         destinationitems = $(destination).jqxTree('getItems');
                     }
                     else //add company and category
                     {
                         destinationItemsMaxID = destinationItemsMaxID + 1;
                         //console.log(assignedItemsCount);
                         $(destination).jqxTree('addTo', { id: destinationItemsMaxID, label: $(source).jqxTree('getItem', companyelement).label, value: $(source).jqxTree('getItem', companyelement).value });
                         var addedcompany = $(destination).jqxTree('getItem', $('#' + destinationItemsMaxID)[0]);
                         //console.log("assigneditemsparent", assigneditemsparent);
                         destinationItemsMaxID = destinationItemsMaxID + 1;
                         $(destination).jqxTree('addTo', { label: $(source).jqxTree('getItem', categoryelement).label, value: $(source).jqxTree('getItem', categoryelement).value, id: destinationItemsMaxID }, addedcompany);
                         var addedcategory = $(destination).jqxTree('getItem', $('#' + destinationItemsMaxID)[0]);
                         destinationItemsMaxID = destinationItemsMaxID + 1;
                         $(destination).jqxTree('addTo', { label: item.label, value: item.value, id: destinationItemsMaxID }, addedcategory);
                         destinationitems = $(destination).jqxTree('getItems');

                     }

                 }
             }
             //**********************************DISPATCHER LEVEL *************************************
             else if (item.level == 1 && $(source).jqxTree('getItem', item.parentElement).value == 0) {
                 //strDispatchers += item.value + ",";
                 console.log("process dispatcher item");

                 companyelement = item.parentElement;
                 
                 console.log("PARENT ELEMENT", companyelement);
                 //console.log("itemelemet", item.element)

                 if (!bfoundparent) {
                     loopassigned:
                     for (var j = 0; j < destinationitems.length; j++) {//loop through assigned elements to see if parents there
                         //console.log(destinationitems[j].level, destinationitems[j].label, destinationitems[j].value);
                         //console.log($(source).jqxTree('getItem', companyelement).label, $(source).jqxTree('getItem', companyelement).value);
                         if (destinationitems[j].level == 0 &&
                                    destinationitems[j].label == $(source).jqxTree('getItem', companyelement).label &&
                                    destinationitems[j].value == $(source).jqxTree('getItem', companyelement).value) {
                             assigneditemsparent = destinationitems[j].element;
                             console.log("ASSIGNED ITEM PARENT ELEMENT", assigneditemsparent);
                             bfoundparent = true;
                             break loopassigned;
                         }
                     }
                 }
                 console.log("foundparent", bfoundparent);
                 if (bfoundparent) {
                     destinationItemsMaxID = destinationItemsMaxID + 1;
                     console.log("ADD DISPATCHER ITEM");
                     var lbl = item.label;
                     var val = item.value;
                     $(destination).jqxTree('addTo', { label: lbl, value: val, id: destinationItemsMaxID }, assigneditemsparent);
                 }
                 else {
                     destinationItemsMaxID = destinationItemsMaxID + 1;
                     console.log("ADD PARENT OF DISPATCHER ITEM");
                     var lbl = $(source).jqxTree('getItem', companyelement).label;
                     var val = $(source).jqxTree('getItem', companyelement).value;

                     $(destination).jqxTree('addTo', { id: destinationItemsMaxID, label: lbl, value:val });
                     var assigneditemsparent = $(destination).jqxTree('getItem', $('#' + destinationItemsMaxID)[0]);
                     console.log("ASSIGNED ITEM PARENT ELEMENT", assigneditemsparent.element);
                     destinationItemsMaxID = destinationItemsMaxID + 1;
                     console.log("ADD DISPATCHER ITEM");
                    lbl = item.label;
                    val = item.value;
                     $(destination).jqxTree('addTo', { label: lbl, value: val, id: destinationItemsMaxID }, assigneditemsparent.element);
                     destinationitems = $(destination).jqxTree('getItems');

                 }

                
             }

             //refresh tree and reinit vars
             $(source).jqxTree('removeItem', itemelement);
            
         }

         $(destination).jqxTree('refresh');
         $(source).jqxTree('refresh');

         $(destination).jqxTree('uncheckAll');
         $(destination).jqxTree('expandAll');

        
     }

        <div  class="section group"> 
                <div class="col grid_5_of_12" >
       
                   <div id='jqxTreeUnassigned' style='float: left; margin-left: 2px; '></div>
                 <input type="button" style='margin-top: 20px;'  value="Assign >>" id='btnAssign' />
                  <input type="button" style='margin-top: 20px;'  value="UnAssign <<" id='btnUnAssign' />
                   <div id='jqxTreeAssigned' style='float: left; margin-left: 2px; '></div>
                 
        </div>
     </div>

movetreeviewitems('#jqxTreeAssigned', '#jqxTreeUnassigned');
 movetreeviewitems('#jqxTreeUnassigned', '#jqxTreeAssigned');

[MarinaParticipant]

I actually recreated this issue in more simple page, but its still happening when ids of the items in both trees have the same values. If ids are different its seems working fine.

<script type="text/javascript">

                function movetreeviewitems(source, destination) {
                    var sourceItems = $(source).jqxTree('getCheckedItems');
                    var destinationitems = $(destination).jqxTree('getItems');
                    var bfoundparent = false;
                  
                    var assigneditemsparent;

                    var destinationItemsMaxID = 0;
                    for (var n = 0; n < destinationitems.length; n++) {//loop through assigned elements to find max id
                        if (Number(destinationitems[n].id) > Number(destinationItemsMaxID)) {
                            destinationItemsMaxID = Number(destinationitems[n].id);
                        }
                    }
                    mainloop:
                    for (var i = 0; i < sourceItems.length; i++) {
                        var item = sourceItems[i];
                        if (item.level > 0) {
                            destinationitems = $(destination).jqxTree('getItems');

                            console.log("item", item);
                            console.log("item parent element", item.parentElement);
                            console.log("parent item", $(source).jqxTree('getItem', item.parentElement));

                            bfoundparent = false;

                            var itemcompanyid, itemcategoryid, categoryelement, companyelement, categoryitem, companyitem, itemelement;
                            itemelement = item.element;

                            if (!bfoundparent) {
                                loopassigned:
                                for (var j = 0; j < destinationitems.length; j++) {//loop through assigned elements to see if parents there
                                    if (destinationitems[j].level == 0 &&
                                        destinationitems[j].label == $(source).jqxTree('getItem', item.parentElement).label &&
                                        destinationitems[j].value == $(source).jqxTree('getItem', item.parentElement).value) {
                                        assigneditemsparent = destinationitems[j].element;
                                        console.log("ASSIGNED ITEM PARENT ELEMENT", assigneditemsparent);
                                        bfoundparent = true;
                                        break loopassigned;
                                    }
                                }
                            }
                            console.log("foundparent", bfoundparent);
                            if (bfoundparent) {
                                destinationItemsMaxID = destinationItemsMaxID + 1;
                                console.log("ADD DISPATCHER ITEM");
                                var lbl = item.label;
                                var val = item.value;
                                $(destination).jqxTree('addTo', { label: item.label, value: item.value, id: destinationItemsMaxID }, assigneditemsparent);
                            }

                            $(source).jqxTree('removeItem', itemelement);
                        }
                    }

                }

                $(document).ready(function () {
                    var data1 = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "value": "0"
                }
                ]

                    var data2 = [
               {
                   "id": "1",
                    "value": "0",
                   "text": "Chocolate Beverage",
                   "parentid": "-1"
               }, {
                   "id": "2",
                   "text": "Caffe Vanilla Frappuccino",
                   "parentid": "1",
                   "value": "$2.3"
               },  {
                   "id": "3",
                   "text": "Caffe Vanilla Frappuccino Light",
                   "parentid": "1",
                   "value": "$2.3"
               }]

                    // prepare the data
                    var source1 =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                    ],
                    id: 'id',
                    localdata: data1
                };
                    var source2 =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                    ],
                    id: 'id',
                    localdata: data2
                };

                    var dataAdapter1 = new $.jqx.dataAdapter(source1);
                    dataAdapter1.dataBind();
                    var records1 = dataAdapter1.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

                    var dataAdapter2 = new $.jqx.dataAdapter(source2);
                    dataAdapter2.dataBind();
                    var records2 = dataAdapter2.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

                    $('#jqxTree1').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px', source: records1 });
                    $('#jqxTree1').css('visibility', 'visible');
                    $('#jqxTree2').jqxTree({ height: '400px', hasThreeStates: true, checkboxes: true, width: '330px', source: records2 });
                    $('#jqxTree2').css('visibility', 'visible');

                    $("#btnAssign").jqxButton({ width: 120, height: 40 });
                    $("#btnAssign").on('click', function () {
                        movetreeviewitems('#jqxTree1', '#jqxTree2');
                    });

                    $("#btnUnAssign").jqxButton({ width: 120, height: 40});
                    $("#btnUnAssign").on('click', function () {
                        movetreeviewitems('#jqxTree2', '#jqxTree1');
                    });

                });
        </script>

     <table>
     <tr>
        <td> <div id='jqxTree1'></div></td>
        <td> 
        <input type="button" style='margin-top: 20px;'  value="Assign >>" id='btnAssign' />
        <input type="button" style='margin-top: 20px;'  value="UnAssign <<" id='btnUnAssign' />
        </td>
        <td> <div id='jqxTree2'></div></td>
     </tr>
     </table>
      

[adminKeymaster]

Hi Marina,

The ids should always be unique. It will not work with same ids. Ids are related to event handling, selection, drag and drop, etc.

Regards,
Peter

[Author]

Posts