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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Drag and Drop Between two grids

Thread ID:





150058 Dec 19,2019 03:21 AM UTC Dec 20,2019 04:56 AM UTC Angular - EJ 2 1
Tags: Grid
Asked On December 19, 2019 03:21 AM UTC

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon