DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by shalini on Aug 07, 2009 08:09

open dhtmlx forum

Drag and drop from one grid to another



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Drag and Drop between Grids</title>

 <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">

 <script src="../../codebase/dhtmlxcommon.js"></script>
 <script src="../../codebase/dhtmlxgrid.js"></script>
 <script src="../../codebase/dhtmlxgridcell.js"></script>
 <script src="../../codebase/ext/dhtmlxgrid_drag.js"></script>
</head>

<body>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
 <tr valign="middle">
 
 <td width="40" align="center"><img src="../common/dhtmlxgrid_icon.gif" border="0"></td>
 
 <td width="150" align="left" nowrap="true">Sample: dhtmlxGrid</td>
 
 <td width="0" align="left" nowrap>Drag and Drop between Grids</td>
 
 <td width="0" align="right"><a href="http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml">dhtmlxGrid main page</a></td>
 
 <td width="50"><div class="sample_close"><a href="javascript:void(0);" onclick="self.close();"><img src="../common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
 </tr>
</table>

 
Drag-n-drop within Grid and between Grids
 

 <table width="800px">
 <tr>
<td>
 <div id="gridbox2" width="250px" height="250px" style="background-color:white;"></div>
</td>
 <td>
 <div id="gridbox3" width="500px" height="250px" style="background-color:white;"></div>
 </td>
 </tr>
 </table>

<div class='sample_code'><div class="hl-main"><pre>
<script src="../js/dhtmlxcommon.js"></script>
<script src="../js/dhtmlxgrid.js"></script>
<script src="../js/dhtmlxgridcell.js"></script>
<script src="../js/dhtmlxgrid_drag.js"></script>
<script><div class="hl-main"><pre>
mygrid = new dhtmlXGridObject('gridbox3');
...
mygrid.enableDragAndDrop(true);</pre></div></script></pre></div></div>

<script>
 mygrid3 = new dhtmlXGridObject('gridbox3');
 mygrid3.selMultiRows = true;
 mygrid3.setImagePath("../../codebase/imgs/");
 var flds = "Sales,Book Title,Author,Price";
 flds += ",In Store,Shipping,Bestseller,Date of Publication";
 mygrid3.setHeader(flds);
 mygrid3.setInitWidths("50,150,120,80,80,80,80,200")
 mygrid3.setColAlign("right,left,left,right,center,left,center,center")
 mygrid3.setColTypes("dyn,ed,ed,price,ch,coro,ra,ro");
 mygrid3.setColSorting("int,str,str,int,str,str,str,date")
 mygrid3.setColumnColor("white,#d5f1ff,#d5f1ff")
 mygrid3.setMultiLine(false);
 mygrid3.enableDragAndDrop(true);
 mygrid3.init();
 mygrid3.loadXML("grid.xml");

 mygrid2 = new dhtmlXGridObject('gridbox2');
 mygrid2.selMultiRows = true;
 mygrid2.setImagePath("../../codebase/imgs/");
 var flds = "Alpha,Betta";
 mygrid2.setHeader(flds);
 mygrid2.setInitWidths("100,150")
 mygrid2.setColAlign("right,left")
 mygrid2.setColTypes("ed,ed");
 mygrid2.setColSorting("int,str");
 mygrid2.setColumnColor("white,#d5f1ff");
 mygrid2.setMultiLine(false);
 mygrid2.enableDragAndDrop(true);
 mygrid2.init();
 mygrid2.loadXML("dynscroll.xml");
mygrid3.attachEvent("onDrop",DisableDrop)

function DisableDrop(sID,tID,DropID,sourceGrid,targetGrid)
{
//alert(sourceGrid);
//alert(targetGrid);
if (sourceGrid==targetGrid)
{
alert("In Same Grid");
}
else
{
alert("In Diffrent Grid");
}
return false;
}

</script>


<table callspacing="0" cellpadding="0" border="0" class="sample_footer"><tr><td style="padding-left: 8px;">© <a href="http://www.dhtmlx.com">DHTMLX LTD</a>. All rights reserved</td></tr></table>


</body>
</html>

We have written this code that if we want to drag and drop to another grid them drop event should not be perfromed...

please help

Answer posted by Alex (support) on Aug 07, 2009 08:18

In this case you can set onDrag event for both grids:

mygrid3.attachEvent("onDrag",doOnDrag);
mygrid2.attachEvent("onDrag",doOnDrag); �
function doOnDrag(sID,tID,sourceGrid,targetGrid){
� return sourceGrid==targetGrid;
}