Drag and Drop Reorder in KendoUI list view

Question

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.

Answer 1

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/