CODEWITHSUNDEEP
listviewdrag-and-dropkendo-ui
Ignacio Correia
Ignacio Correia

Reputation: 3668

Drag and Drop Reorder in KendoUI list view

Hy, I am new to KendoUI and I am trying to reorder a listView with drag and drop. I notice that the listVIew plugin does not have draggable features in its CORE so I am trying to add the Draggable actions from Kendo Framework but I am not even close.

Is it possible to reorder the listView items with Drag and Drop?

Kendolistview and Kendo Drag

I notice that one of KendoUI plugins does have this feature:

TreeView Demo

PS: A demo or something similar is very welcome.

Upvotes: 4

Views: 6588

Answers (2)

OnaBai
OnaBai

Reputation: 40897

If you need that not only behave as a ListView but being an actual ListView you might do:

var dataSource = new kendo.data.DataSource({
    data    : products,
    pageSize: 10
});

$("#listView").kendoListView({
    dataSource: dataSource,
    template  : kendo.template($("#template").html()),
    dataBound : function () {
        $(".product").kendoDraggable({
            hint: function (element) {
                return element.clone();
            }
        });
    }
});

$("#listView").kendoDropTargetArea({
    filter: ".product",
    drop  : function (e) {
        var srcUid = e.draggable.element.data("uid");
        var dstUid = e.dropTarget.data("uid");
        var srcItem = dataSource.getByUid(srcUid);
        var dstItem = dataSource.getByUid(dstUid);
        var dstIdx = dataSource.indexOf(dstItem);
        dataSource.remove(srcItem);
        dataSource.insert(dstIdx, srcItem);
        e.draggable.destroy();

    }
});

Basically we identify each element with the CSS class .product and then we use it for inserting it and removing it from the DataSource. This automatically redraw it.

See running example here: http://jsfiddle.net/OnaBai/MYbgy/1/

Upvotes: 6

OnaBai
OnaBai

Reputation: 40897

I think that this might work:

$("#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);
    }
});

Also some information here

Upvotes: 1

Related Questions