Kendo Grid Draggable Rows With Kendo Template

Question

I'm going to implement drag and drop behaviour with kendo grid which is populated using template. How can I achieve draggable rows and reordering with kendo grid.

Answer 1

    .Orderable()

Works a treat. Maybe try ".Dragable()" I'm a bit unsure about that though.

Answer 2

Take a look at following my demo code and try it to implement.

var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]

var dataSource = new kendo.data.DataSource({
    data: data,        
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number" },
                text: { type: "string" },
                position: { type: "number" }
            }
        }
    }
});

var grid = $("#grid").kendoGrid({
 dataSource: dataSource,  
 scrollable: false,    
 columns: ["id", "text", "position"]            
}).data("kendoGrid");

grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function(e) {
    return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() +     '</tr></tbody></table></div>');
}
});

grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function(e) {        
    var target = dataSource.get($(e.draggable.currentTarget).data("id")),
        dest = $(e.target);

    if (dest.is("th")) {
        return;
    }       
    dest = dataSource.get(dest.parent().data("id"));

    //not on same item
    if (target.get("id") !== dest.get("id")) {
        //reorder the items
        var tmp = target.get("position");
        target.set("position", dest.get("position"));
        dest.set("position", tmp);

        dataSource.sort({ field: "position", dir: "asc" });
    }                
}
});

Answer 3

put .Dragable() but make sure that you sit it in the right place, the ordering is required. Some times you may not get the expected result and that may happen due to not paying attention to the order.