剑道网格拖放问题答案

【问题标题】：Kendo grid drag and drop issue剑道网格拖放问题
【发布时间】：2013-04-03 09:51:25
【问题描述】：

我们在剑道网格表中使用剑道拖放功能。

1) 如果用户在任何可编辑字段上提供数据并且没有保存数据，如果用户单击/跳转到其他字段进行编辑。用户正在丢失他的更新数据。

2) 如果用户更新任何记录，我们将再次刷新/重新生成表，或者如果我们在函数外部刷新/重新生成，或者我们使用函数外部添加新记录。之后，用户无法删除行以替换为其他行。

var data = [
                    { Id: 1, Name: "data 1", Position: 1 },
                    { Id: 2, Name: "data 2", Position: 2 },
                    { Id: 3, Name: "data 3", Position: 3 }
                ];

                var dataSource = new kendo.data.DataSource({
                        data: data,        
                        schema: {
                            model: {
                                Id: "Id",
                                fields: {
                                    Id: { type: "number" },
                                    Name: { type: "string" },
                                    Position: { type: "number" }
                                }
                            }
                        }
                    });

                var grid= $("#grid").kendoGrid({
                    dataSource: dataSource,  
                    scrollable: false,    
                    editable : true,
                    toolbar:  ["save","cancel", "create"],
                   columns: ["Id", "Name", "Position"]            
                }).data("kendoGrid");

            grid.table.kendoDraggable({
                    filter: "tbody > tr:not(.k-grid-edit-row)",
                    group: "gridGroup",
                cursorOffset: { top: 10, left: 10 },
                    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.getByUid($(e.draggable.currentTarget).data("uid")),
                          dest = $(e.target);

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

                    //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" });
                    }
                  }
                });

【问题讨论】：

请参考jsfiddel文件的链接。 jsfiddle.net/piyushparmar01/yCDjm/10>
无法到达您的 js fiddle..尝试发布您的代码与问题
在model 定义中尝试将Id: "Id" 替换为“id:Id”。

标签： javascript jquery drag-and-drop kendo-ui kendo-grid

【解决方案1】：

我前段时间遇到过类似的问题。我还在他们的论坛上找到了以下主题 - http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ

因此，如果您在表格中再添加一列并在其中放置图像或其他元素，那么您将能够将该元素用作可拖动目标，例如：
```
grid.table.kendoDraggable({
    filter: "tbody > .draggableTarget".....
```
在您刷新表格的情况下，表格在 DOM 中完全重新创建，因此您必须重新订阅拖放功能。

【讨论】：

【解决方案2】：

我在使用带有可编辑网格的较新 kendoSortable 来实现拖放行排序时遇到了类似的问题。

这个小提琴http://jsfiddle.net/UsCFK/273/ 有效。

它使用上面提到的带有拖动手柄的列来防止单元格编辑丢失 - 其他单元格在设置中被忽略：

grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: $.noop,
    cursor: "move",
    ignore: "TD, input",
    placeholder: function (element) {
      return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    },
    container: '#grid tbody',
    change: onGridRowChange
});

它还会更新数据源中的位置字段，而不是像其他示例中那样删除，然后重新插入该行 - 因为这将导致对移动的每一行向服务器发出删除请求 - 这可能导致单击批量编辑取消按钮时出现问题。位置字段仅用于演示目的 - 不应公开用于手动编辑。

【讨论】：