在网格之间拖放后，kendo mcv 网格行格式不保持答案

【问题标题】：kendo mcv grid row formatting not maintained after drag and drop between grids在网格之间拖放后，kendo mcv 网格行格式不保持
【发布时间】：2017-09-08 20:49:48
【问题描述】：

问题： 从一个网格拖放到另一个网格（两个方向）的结果是行数据未与适当的标题正确对齐。

拖放前：

之后（行被删除到另一个表，然后又被删除到原始表）

为简洁起见，我将只发布网格的列定义。网格使用相同的模型，但并非所有列在两个网格中都可见。

网格1：

  ...
    .Name("Group1")
    .Columns(columns =>
           {
              columns.Bound(e => e.FlagId).Hidden(true);
              columns.Bound(e => e.TransactionId).Hidden(true);
              columns.Bound(e => e.EmployeeId).Hidden(true);
              columns.Bound(e => e.EmployeeName);
              columns.Bound(e => e.FlagDate).Hidden(true);
              columns.Bound(e => e.FlagCreatedById).Hidden(true);
              columns.Bound(e => e.FlagCreatedBy).Hidden(true);
              columns.Bound(e => e.Reason).Hidden(true);
              columns.Bound(e => e.Score).HtmlAttributes(new { @class = "currency" });
                        columns.Bound(e => e.NumberOfTransactions).HtmlAttributes(new { @class = "currency" });
                        columns.Bound(e => e.TotalAmount).HtmlAttributes(new { @class = "currency" });
                    })
  ...

网格 2：

  ...
   .Name("Group2")
   .Columns(columns =>
          {
              columns.Bound(e => e.FlagId).Hidden(true);
              columns.Bound(e => e.TransactionId).Hidden(true);
              columns.Bound(e => e.EmployeeId).Hidden(true);
              columns.Bound(e => e.EmployeeName);
              columns.Bound(e => e.FlagDate);
              columns.Bound(e => e.FlagCreatedById).Hidden(true);
              columns.Bound(e => e.FlagCreatedBy);
              columns.Bound(e => e.Reason);
              columns.Bound(e => e.Score).HtmlAttributes(new { @class = "currency" });
              columns.Bound(e => e.NumberOfTransactions).Hidden();
              columns.Bound(e => e.TotalAmount).HtmlAttributes(new { @class = "currency" });
          })
  ...

drop javascript：

   group1.kendoDropTarget({
        drop: function (e) {
            console.log("e.draggable.currentTarget: %O", e.draggable.currentTarget);

            e.dropTarget.append($(e.draggable.currentTarget).clone());
            $(e.draggable.currentTarget).remove();
        },
        group: "gridGroup2"
    });

【问题讨论】：

标签： javascript kendo-ui drag-and-drop kendo-grid kendo-asp.net-mvc

【解决方案1】：

不要使用 DOM（在这种情况下，imo 不是一个好习惯），而是尝试将数据仅复制并添加到目标网格。

drop: function(e) {
    var sourceGrid = $(e.draggable.element).data("kendoGrid"),
        dataItem = sourceGrid.dataItem(e.draggable.currentTarget);

    $(e.dropTarget).data("kendoGrid").dataSource.add(dataItem);
}

Demo

【讨论】：