KendoUI Sortable like JQueryUI

Question

Looking for an example of using KendoUI like the JQueryUI sortable method. Can't seem to find anything like this. What a shame if you can't do this in KendoUI.

http://jqueryui.com/demos/sortable/

Answer 1

If you want to have the same look & feel that other KendoUI widgets you might try to implement it using TreeView:

If this are the elements that are sortable:

var dataSource = [
    { id:1, text:"Element 1" },
    { id:2, text:"Element 2" },
    { id:3, text:"Element 3" },
    { id:4, text:"Element 4" },
    { id:5, text:"Element 5" },
    { id:6, text:"Element 6" }
];

then you might use the following code:

$("#sortable").kendoTreeView({
    dataSource :dataSource,
    template   :"<div class='ob-item'> #= item.text # </div>",
    dragAndDrop:true,
    drag       :function (e) {
        var dst = $($(e.dropTarget).closest(".k-item")[0]).data("uid");
        var src = $(e.sourceNode).data("uid");
        if ($(e.dropTarget).hasClass("ob-item") && dst != src) {
            e.setStatusClass("k-insert-top");
        } else {
            e.setStatusClass("k-denied");
        }
    },
    drop       :function (e) {
        if ($(e.sourceNode).data("uid") !== $(e.destinationNode).data("uid")) {
            $(e.sourceNode).insertBefore(e.destinationNode);
        }
        e.setValid(false);
    }
});

that renders a sortable list.

NOTES:

ob-item is the styling that you want for each sortable item. For example:

.ob-item {
    background-color: #e9e9e9;
    border: 1px solid #a99f9a;
    color: #2e2e2e;
    padding: 5px;
    border-radius: 4px;
}

If you allow nesting then you should replace insertBefore by append.

Answer 2

Yes you can do that in KendoUi. I agree, their documentation could be a little more clear, but check out under treeview drag & drop:

http://demos.kendoui.com/web/treeview/dragdrop.html