Recursion problem with binding listbox

[anubis76Participant]

Hi,

I have two listboxes. I am using jqxDragDrop to transfer items from the main list to the other. After transferring the items, the user clicks save and all the transferred items are copied to a Knockout observableArray. The save process works fine. I am using this as the source for the first listbox:

var data = new Array();
    var drugCat = ['Item 1', 'Item 2', 'Item 3'];
    var drugSub = ['Item Desc 1', 'Item Desc 2', 'Item Desc 3'];
    var drugID = ['alc1', 'alc2', 'liq'];

    var k = 0;
    for (var i = 0; i < drugCat.length; i++) {
        var row = {};
        row["Cat"] = Cat[k];
        row["Desc"] = Sub[k];
        row["ID"] = ID[k];
        data[i] = row;
        k++;
    }
    var sourceD = {
        localdata: data,
        datatype: "array"
    };

My main list:

$('#druglist').jqxListBox({ selectedIndex: 0, allowDrag: true, allowDrop: false, dropAction: 'copy', source: dataAdapterD, displayMember: "DrugCat", valueMember: "DrugID", itemHeight: 70, height: '100%', width: '300px',
        dragEnd: function (dragItem, dropItem) {

        },
        renderer: function (index, label, value) {
            var datarecord = data[index];
            var table = '<table style="min-width: 130px;"><tr><td><span class="labeltext">' + datarecord.DrugCat + '</span></td></tr><tr><td>' + datarecord.DrugDesc + '</td></tr></table>';
            return table;
        }
    });

$('#druglistC').jqxListBox({ allowDrop: true, allowDrag: true, dropAction: 'copy', itemHeight: 40, height: '100%', width: '300px',
        renderer: function (index, label, value) {
            return "<span class='labeltext'>" + label + "</span>";
        },
        dragEnd: function (dragItem, dropItem) {
            $("#druglistC").jqxListBox('removeItem', dragItem);
        }
    });

When I reload my page, I am getting the value of the previously chosen items from my observableArray and I am trying to get all the items the user chose from the first listbox, and populate back the second listbox.

I added the following code:

$('#druglist').on("bindingComplete", function () {
        for (i = 0; i < arr.length; i++) {
            var item = $("#druglist").jqxListBox("getItemByValue", arr[i]);
            itemArr.push(item);
            //$("#druglistC").jqxListBox('addItem', item);
        }
    });

However, if I add the line to transfer the items
$("#druglistC").jqxListBox('addItem', item);
, I get an error saying too much recursion.

How do I go about fixing this problem, if possible?

Thanks and Regards,
AJ

[Peter StoevKeymaster]

Hi Aj,

The problem here is that by pushing new items in your observable array within bindingComplete, the bindingComplete will be raised again and you’ll do that again and the event will be raised again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[anubis76Participant]

Hi Peter,

Thanks for your reply. What is the best way around the problem, to add Items to the second list programmatically on loading?

Warmest,
AJ

[Peter StoevKeymaster]

Hi Aj,

Just don’t add them in the “bindingComplete” handler which will cause the recursion due to the reasons I explained in the previous post.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[anubis76Participant]

Hi Peter,

Thanks a lot. It works well when I put it after the code for creating the second list.

Cheers,
AJ

[Author]

Posts