Edit with Drag Drop

by lhoeppner

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<div id="grid"></div>

CSS

.drag-helper {
    opacity: 0.4;
    z-index:1000;
    top: 7px;
}
.k-dirty-cell {
    color: blue;
}

JavaScript

$.fn.reverse = [].reverse; //save a new function from Array.reverse

var data = [{
    id: 1,
    name: "Michael",
    phone: "897-894-8956"
}, {
    id: 2,
    name: "George Michael",
    phone: "897-555-5555"
}, {
    id: 3,
    name: "George Sr.",
    phone: "897-444-4444"
}, {
    id: 4,
    name: "Gob",
    phone: "897-333-3333"
}, {
    id: 5,
    name: "Lucille",
    phone: "897-222-2222"
}, {
    id: 6,
    name: "Tobias",
    phone: "897-111-1111"
}, {
    id: 7,
    name: "Maeby",
    phone: "897-666-6666"
}, {
    id: 8,
    name: "Buster",
    phone: "897-777-7777"
}, {
    id: 9,
    name: "Lindsay",
    phone: "897-888-8888"
}];

var dataModel = kendo.data.Model.define({
    id: "id",
    fields: {
        id: {
            type: "number",
            editable: false
        },
        name: {
            type: "string",
            editable: true
        },
        phone: {
            type: "string",
            editable: false
        }
    }
});

var mainDataSource = new kendo.data.DataSource({
    schema: {
        model: dataModel
    },
    data: data
});

var mainGrid = $("#grid").kendoGrid({
    dataSource: mainDataSource,
    columns: ["id", "name", "phone"],
    scrollable: true,
    editable: true,
    navigatable: true,
    height: 200
}).data("kendoGrid");

var selectedClass = 'k-state-selected';
$(document).on('click', '#grid tbody tr', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass(selectedClass);
    } else {
        $(this).addClass(selectedClass).siblings().removeClass(selectedClass);
    }
});

mainGrid.table.kendoDraggable({
    filter: "tbody tr",
    group: "gridGroup",
    axis: "y",
    hint: function (item) {
        var helper = $('<div class="k-grid k-widget drag-helper"/>');
        if (!item.hasClass(selectedClass)) {
            item.addClass(selectedClass).siblings().removeClass(selectedClass);
        }
        var elements = item.parent().children('.' + selectedClass).clone();
       ...