jquerykendo-uikendo-sortable

How to move all list items on click of a button from one list to another connected list in kendo sortable list?


I am working on kendo sortable list. Its working fine for drag and drop option. But now I want to move all list items on click of a button from one list to another connected list in kendo sortable list.

I have written following code, Now on click of button I want to move item2, item3 to sortable-listSelectedColumns list at the same time I want to remove those items from sortable-listAllColumns list.

   <div class="form-group">
            <div class="col-md-6">
                <div class="box select-box item-list">
                    <ul id="sortable-listAllColumns" style="min-height: 100px;">
                <li>Item 2</li>
                <li>Item 3</li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="box select-box seleted-item">
                    <ul id="sortable-listSelectedColumns" style="min-height: 100px;">

                    </ul>
                </div>
            </div>
        </div>

$(document).ready(function () {
    $("#sortable-listAllColumns").kendoSortable({
        connectWith: "#sortable-listSelectedColumns",
        placeholder: placeholder
    });

    $("#sortable-listSelectedColumns").kendoSortable({
        connectWith: "#sortable-listAllColumns",
        placeholder: placeholder,
        cancel: onCancel,
        move: onMove
    });

});

Solution

  • On button click,

    $("#sortable-listSelectedColumns").data("kendoSortable").element.append($("#sortable-listAllColumns").data("kendoSortable").items());