CODEWITHSUNDEEP
jquery-uikendo-ui
AgileJoe
AgileJoe

Reputation: 51

KendoUI Sortable like JQueryUI

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/

Upvotes: 5

Views: 2316

Answers (5)

Vel
Vel

Reputation: 200

Try like this 

  var template = kendo.template("<ul id='sortable-basic'><li class='sortable'>Papercut <span>3:04</span></li><li class='sortable'>One Step Closer <span>2:35</span></li><li class='sortable'>With You <span>3:23</span></li><li class='sortable'>Points of Authority <span>3:20</span></li><li class='sortable'>Crawling <span>3:29</span></li><li class='sortable'>Runaway <span>3:03</span></li><li class='sortable'>By Myself <span>3:09</span></li></ul>");

$("#divSolution").html(template); //display the result
$("#sortable-basic").kendoSortable();

Upvotes: 1

trailmax
trailmax

Reputation: 35106

For those who find this question. Now Kendo UI has Sortable element: http://demos.telerik.com/kendo-ui/web/sortable/index.html

Upvotes: 2

OnaBai
OnaBai

Reputation: 40887

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.

Upvotes: 4

Eric Leroy
Eric Leroy

Reputation: 1836

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

Upvotes: 3

BentOnCoding
BentOnCoding

Reputation: 28158

You can build a custom jQuery UI js file with the custom builder: http://jqueryui.com/download

Just get the reference to include the ui core and the sortable function you require, the file size will be minimal and you will get the functionality you are looking for.

Since Kendo UI works with jQuery, the added weight of jQuery UI is minimal.

Upvotes: 1

Related Questions