添加新记录后,Kendo UI网格拖放功能停止工作

时间:2015-08-26 12:31:40

标签: kendo-ui kendo-grid

我有Kendo UI网格,具有拖放功能:

var data = [
    { id: 1, text: "text 1", position: 0 },
    { id: 2, text: "text 2", position: 1 },
    { id: 3, text: "text 3", position: 2 },
    { id: 4, text: "text 4", position: 40 },
    { id: 5, text: "text 5", position: 100 },
    { id: 6, text: "text 6", position: 600 },
    { id: 7, text: "text 7", position: 47000 },
    { id: 8, text: "text 8", position: 99999 },
    { id: 9, text: "text 9", position: 1000000 }];

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,
    editable  : "popup",
    columns: ["id", "text", "position"],
    toolbar: ["create"]
}).data("kendoGrid");

var createDraggable = function() {
grid.table.find("tbody tr").kendoDraggable({
    cursorOffset: {
        top: 10,
        left: 10
    },
    group: "gridGroup",
    hint: function(e) {
        return $('<div class="k-grid k-widget" style="color:red"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
    }
});

grid.table.find("tbody tr").kendoDropTarget({
    dragenter: function (e) {
        var target = grid.dataSource.getByUid($(e.draggable.currentTarget));
        $(e.dropTarget[0]).addClass("highlight-droparea");

        // e.dropTarget.addClass("highlight-droparea");  
        console.log('entering');
    },
    dragleave: function (e) { 
        $(e.dropTarget[0]).removeClass("highlight-droparea");
        //e.dropTarget.removeClass("highlight-droparea"); 
        console.log('leaving');
    },    
    group: "gridGroup",    
    drop: function(e) {
        var target = grid.dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
            dest = $(e.target);

        if (dest.is("th") || dest.is("thead") || dest.is("span") || dest.parent().is("th")) {
            return;
        }     

        //in case the grid contains an image
        else if (dest.is("img")) {
            dest = grid.dataSource.getByUid(dest.parent().parent().data("uid"));
        } else {
        dest = grid.dataSource.getByUid(dest.parent().data("uid"));
        }

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

            //Lets mark the changes as dirty
            target.dirty = true;
            dest.dirty = true;

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

        createDraggable();
    }
});

};

createDraggable();

Fiddle.

如果您创建新记录,则拖放功能会停止工作或点击&#34;取消&#34;在创建新行时。我认为同样的问题会出现在所有网格CRUD操作中。

任何想法如何解决这个问题?

0 个答案:

没有答案