jQuery UI Widgets Forums Lists ListBox Move items between 2 listbox

This topic contains 5 replies, has 2 voices, and was last updated by  Guill 8 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Move items between 2 listbox #71142

    Guill
    Participant

    Hello,

    I need to move items between 2 listboxes : items from listA to listB or listB to listA 😉
    I need also to use drag and drop betweed lists.
    So, I have created 2 listboxes and 2 buttons : first for moving all items from list A to list B, second for moving all items from list B to list A.
    When I click on a button, items are copied to target list but not removed from source (I use “clear” method).
    Other problem, the drag and drop don’t work after this operation.

    This is the code for HTML part :

    <table>
        <tr>
    	    <td>
    		    <select id="selectcolsavailables">
    			    <option value="address">Address</option>
    				<option value="age">Age</option>
    				<option value="civility">Civility</option>
    				<option value="birthdate">Birthdate</option>
    				<option value="email">Email</option>
    				<option value="phone">Phone</option>
    				<option value="city">City</option>
    			</select>
    		</td>
    		<td width="186" style="text-align:center;">
                <input type="submit" value="Add all >>" id="colsaddallButton"/><br><br>
                <input type="submit" value="<< Delete all" id="colsremoveButton"/>
    		</td>
    		<td>
    			<select id="selectcolsvisibles">
    				<option value="name">Name</option>
    				<option value="firstname">Firstname</option>
    				<option value="zipcode">Zip Code</option>
    			</select>
    		</td>
    	</tr>
    </table>

    and the code for javascript part :

    // function to move items from a list A to list B
    function move_list_items(listA,listB) {
        var i = 0;
        var item;
        // begin the update
        $("#"+listA).jqxListBox('beginUpdate');
        $("#"+listB).jqxListBox('beginUpdate');
        // copy items from A to B
        for (i=0; i<$("#"+listA).jqxListBox('getItems').length; i++) {
            item = $("#"+listA).jqxListBox('getItem', i);
            $("#"+listB).jqxListBox('addItem', { label: item.label, value: item.value} );
        }
        // delete all items from A
        $("#"+listA).jqxListBox('clear');
        // end update
        $("#"+listA).jqxListBox('endUpdate');
        $("#"+listB).jqxListBox('endUpdate');
    }
    
    // create list boxes
    $("#selectcolsavailables").jqxListBox({
    	theme: 'energyblue',
    	width: 300,
        height: 430,
    	allowDrag: true,
    	allowDrop: true
    });
    $("#selectcolsvisibles").jqxListBox({
    	theme: 'energyblue',
    	width: 300,
    	height: 430,
    	allowDrag: true,
    	allowDrop: true
    });
    // create buttons
    $("#colsaddallButton").jqxButton({theme: 'energyblue', width: 140});
    $("#colsaddallButton").on('click', function () {
        move_list_items('selectcolsavailables','selectcolsvisibles');
    });
    $("#colsremoveButton").jqxButton({theme: 'energyblue', width: 140});
    $("#colsremoveButton").on('click', function () {
        move_list_items('selectcolsvisibles','selectcolsavailables');
    });

    What’s wrong with my code please ?

    Thanks for your help.

    Move items between 2 listbox #71180

    ivailo
    Participant

    Hi Guill,

    You can try this like a workaround.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Move items between 2 listbox #71182

    Guill
    Participant

    Thank you very much, ivailo!

    I have another question : how to specify the value and the text for an element in the source ? Do you have an example to do this ? I need to read value of each element.

    Move items between 2 listbox #71184

    Guill
    Participant

    Oher question : how can I sort the listA by text after moving items from listB in this listbox ?

    Thanks in advance

    Move items between 2 listbox #71206

    ivailo
    Participant

    Hi Guill,

    You can use arrays of objects like this demo. There you can add the value option.

    About the sorting just use sort(). Here is the same fiddle with sorting.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Move items between 2 listbox #71293

    Guill
    Participant

    Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.