kendo mcv format de ligne de grille non maintenu après glisser-déposer entre grilles

Question

Problème: Le résultat d'un glisser-déposer d'une grille à une autre (dans les deux directions) entraîne l'alignement incorrect des données de ligne avec les valeurs appropriées. entête.

Avant de glisser-déposer:

Après (la ligne est tombé dans une autre table, puis est retombé à la table d'origine)

Par souci de concision, je vais poster la colonne définitions pour les grilles. Les grilles utilisent le même modèle mais toutes les colonnes ne sont pas visibles dans les deux grilles.

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

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

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

Answer 1

Au lieu de jouer avec les DOM - qui n'est pas une bonne pratique dans ce cas , imo - essayez de copier et d'ajouter uniquement les données à la grille cible.

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

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

Demo