kendo mcv grid row formatting not maintained after drag and drop between grids

Question

Issue: The result of a drag-n-drop from one grid to another (both directions) results with the row data not aligning properly with the appropriate header.

Before drag-n-drop:

After (row is dropped into another table, then dropped back to the originating table)

For brevity, I'll just post the column definitions for the grids. The grids are using the same model but not all the columns are visible in both grids.

Grid1:

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

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

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

DontVoteMeDown DontVoteMeDown · Accepted Answer · 2017-09-08T11:22:14

Instead of playing with the DOM - which is not a good practice in this case, imo - try to copy and add only the data to the target grid.

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

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

Demo

kendo mcv grid row formatting not maintained after drag and drop between grids

1 Answers