We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drag and Drop Between two grids in Angular Grid

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).


1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team December 20, 2019 04:56 AM UTC

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")) { 
    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) { 
    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); 

Help documentation. 

Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon