Kendo UI网格拖放操作在添加新记录后停止工作 [英] Kendo UI grid drag&drop stops working after adding new record

问题描述

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

I have Kendo UI grid with drag&drop functionality:

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();

小提琴.

如果您创建新记录或在创建新行时单击取消"，则拖放操作将停止.我认为所有网格CRUD操作中都会出现相同的问题.

Drag&drop stops working if you create new record or hit "Cancel" while creating new row. The same issue I think would appear in all grid CRUD operations.

有什么办法解决这个问题吗?

Any ideas how to fix this?

推荐答案

之所以会出现此问题，是因为Kendo在每个操作上再次重绘所有行(所有DOM元素)，例如

This problem happens because kendo redraw all the rows(all DOM elements) again on each action, e.g save, cancel, so any event attached to the DOM are lost.

您要做的就是在这些事件上调用createDraggable()以重新创建所有拖放功能.请注意，如果您的网格较大，这可能是不好的.

All you have to do is to call the createDraggable() on these events to recreate all the drag and drop features. Note that this can be bad if you have a large grid.

下面是网格事件:

cancel: function() {
    window.setTimeout(function() {
        createDraggable();
    }, 1); 
},
save: function() {
    window.setTimeout(function() {
        createDraggable();
    }, 1); 
}

是的，这很丑. setTimeout的目的是模拟 after 事件，因为这些事件的名称类似于 before .我的意思是，它们是在DOM发生更改之前被调用的，在此之后我们需要进行拖放操作，否则它们将再次丢失.因此，计时器会在进行更改后立即执行，并且我们会收到一个 after 事件.您有 remove 和

Yep, it is ugly. The purpose of the setTimeout is to simulate an after event, since those events are called like before. I mean, they are called before changes on DOM happens, and we need to apply the drag and drop after that, or they will be all lost again. So the timer executes right after the changes are made and we get an after event. You have remove and edit events as well.

小提琴

这篇关于Kendo UI网格拖放操作在添加新记录后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！