Geek asks and answers

KendoUI Sortable as JQueryUI

We are looking for an example of using KendoUI as a JQueryUI sorting method. It seems it can not find anything like it. What a shame if you cannot do it in KendoUI.

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

+5
source share
5 answers

If you want to have the same appearance as other KendoUI widgets, you can try to implement it using TreeView:

If these are sorted items:

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 can 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);
    }
});

which displays a sorted list.

NOTES:

ob-itemis the style you want for each item to be sorted. For instance:

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

If you allow nesting, you should replace insertBeforewith append.

+4
source

jQ jQuery : http://jqueryui.com/download

​​ui , , .

Kendo jQuery, jQuery .

+1

  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();
+1

More articles:


All Articles