Drag and Drop between grids

Suite and Optimus Suite 5
#1

Hi,

I recently discovered a trouble while using drag & drop between grids, when trying to get the source column. Maybe I did something wrong, but I can’t see what.

I have two basic grids initialised exactly the same way.

function initGrid(pContainer){
  var tmpGrid = new dhtmlXGridObject(pContainer);
  tmpGrid.setImagePath("./codebase/imgs/");
  tmpGrid.setHeader("Column 0, Column 1");
  tmpGrid.setInitWidths("100,*");
  tmpGrid.enableDragAndDrop(true);
  tmpGrid.enableMercyDrag(true);
  tmpGrid.init();
  tmpGrid.setSkin("dhx_skyblue");//set grid skin
  
  for(var i=0;i<10;i++){
    tmpGrid.addRow(i,["cell_"+i+"_0","cell_"+i+"_1"]);
  }

  return tmpGrid;  
}

In my code, I have a very basic event to see what’s happening :

  var tmpGrid1 = initGrid("CONTAINER_GRID1");
  var tmpGrid2 = initGrid("CONTAINER_GRID2");

  tmpGrid2.attachEvent("onDrop",
    function(sId,tId,dId,sObj,tObj,sCol,tCol){
      console.log("[GRID2] Source="+sCol);
    }
  );

When dragging from grid 1 column 0, I can get “0”, “1”, or even “undefined” as “sCol” parameter, without any logic nor regularity.

Has anyone an idea?
My main goal is if I drag from column 0, the line is copied (basic mercyDrag), but from any other column I just copy the source cell content into the destination cell.

#2

Unfortunately the issue cannot be reproduced locally.

Please, provide with a more detailed sample of your code or a complete demo, where the issue can be reconstructed.

#3

Here is my complete code :

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script language="Javascript" src="script.js"></script>                                   
  <script language="Javascript" src="kit/jQuery1.5.2/jquery-1.5.2.min.js"></script>
  <script language="Javascript" src="kit/dhtmlx/dhtmlx.js"></script>
  <link rel="stylesheet" type="text/css" href="kit/dhtmlx/dhtmlx.css" media="screen" />
  <title>Test grid DnD source column</title>
  </head>
  <body onload="new oTestGrid()">
    <div id="CONTAINER_GRID1" style='width:45%;height:750px;float:left;position:relative;background-color:grey;'>
    </div>
    <div id="CONTAINER_GRID2" style='width:45%;height:750px;float:right;position:relative;background-color:lightgrey;'>
    </div>
  </body>
</html>

script.js

function oTestGrid(){
  var tmpGrid1 = initGrid("CONTAINER_GRID1");
  var tmpGrid2 = initGrid("CONTAINER_GRID2");
  tmpGrid2.attachEvent("onDrop",
    function(sId,tId,dId,sObj,tObj,sCol,tCol){
      console.log("[GRID2] Source="+sCol);
    }
  );
}

/**
 * Grid initialisation
**/ 
function initGrid(pContainer){
  var tmpGrid = new dhtmlXGridObject(pContainer);
  tmpGrid.setImagePath("./codebase/imgs/");
  tmpGrid.setHeader("Column 0, Column 1");
  tmpGrid.setInitWidths("100,*");
  tmpGrid.enableDragAndDrop(true);
  tmpGrid.enableMercyDrag(true);
  tmpGrid.init();
  tmpGrid.setSkin("dhx_skyblue");
	
  for(var i=0;i<10;i++){
    tmpGrid.addRow(i,["cell_"+i+"_0","cell_"+i+"_1"]);
  }
  
  return tmpGrid;  
}
#4

No one has an idea?

#5

Unfortunately the issue still cannot be reproduced locally.
Your code works well for us.
Please, try to update your dhtmlx.
If issue still occurs for you - please, provide with a complete demo, where the issue can be reconstructed.