Drag and Drop Between two grids in Angular Grid

[Noel]

Hi Support,

Good day. I'm trying to remove the selected record in destination grid  or drag and drop to source grid. But when i checked the data by in destination grid by using console.log, the data is not updated. It shows the record that I initially transferred(dest to source).

See sample https://stackblitz.com/edit/angular-ce1rbe?file=app.component.ts.

Thanks.

[Thavasianand Sankaranarayanan]

Hi Noel, 

Greetings from Syncfusion support. 

We can achieve your requirement using deleteRecord and addRecord method in rowDrop event In both source and destination grid or drag and drop grid. Please refer to the below code and sample link. 

. . . . .  

public rowDrop(args) { 

    var proxy = (document.getElementById("Grid") as any).ej2_instances[0]; 

    if (this.flag_fg) { 

      this.IterateGridRDD(args, "Grid", proxy); 

      this.flag_fg = !this.flag_fg; 

    } 

  } 

  public secondRowDrop(args) { 

    var proxy = (document.getElementById("DestGrid") as any).ej2_instances[0]; 

    if (this.flag_sg) { 

      this.IterateGridRDD(args, "DestGrid", proxy); 

      this.flag_sg = !this.flag_sg; 

    } 

  } 

 

  IterateGridRDD(args, targetGrid, gridObj) { 

    var destGrid = null; 

    var targetId = ""; 

    if (!args.target.closest(".e-grid")) { 

      return; 

    } 

    targetGrid = args.target.closest(".e-grid").id; 

    let gridSearch = parentsUntil(args.target, targetGrid, true); 

    let gridInstances = { 

      Grid: (document.getElementById("Grid") as any).ej2_instances[0], 

      DestGrid: (document.getElementById("DestGrid") as any).ej2_instances[0] 

    }; 

    destGrid = gridInstances[targetGrid]; 

    targetId = targetGrid; 

    if (gridObj.element.id === targetGrid) { 

      return; 

    } 

    if (destGrid) { 

      const origGrid = gridObj; 

      origGrid.rowDropSettings.targetID = targetId; 

      for (var i = 0; i < args.data.length; i++) { 

        origGrid.deleteRecord("OrderID", args.data[i]); 

        destGrid.addRecord(args.data[i], destGrid.currentViewData.length); 

      } 

      args.cancel = true; 

      destGrid.trigger("rowDrop", args); 

    } 

  } 

Sample link: https://stackblitz.com/edit/angular-o1mnxk-jxcsnp?file=app.component.ts 

Help documentation. 

Link1: https://ej2.syncfusion.com/angular/documentation/api/grid/#addrecord 

Link2: https://ej2.syncfusion.com/angular/documentation/api/grid/#deleterecord 

Link3: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdrop 

Link4: https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdragstart 

 

Regards, 

Thavasianand S.