Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by daverch on Jun 16, 2009 08:58
open dhtmlx forum
Drag and Drop using dhtmlxwindow and dhtmlxlayout

I have a laid out a dhtmlxwindow and dhtmlxlayout with three grids. Everything works except that cursor does not show any value. It looks like the value that should be tied to the cursor can be seen behind the dhtmlxwindow. What have I done wrong. I have boiled my code down to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<HTML><HEAD><TITLE>Open Loads</TITLE>
<script src="dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js"></script>
<script src="dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_link.js"></script>
<script src="dhtmlxGrid/codebase/excells/dhtmlXGrid_excell_XLr8wbut.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_selection.js"></script>
<script src="dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_sub_row.js"></script>
<link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css">
<link rel="stylesheet" type="text/css" href="dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_blue.css">
<script src="dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script src="dhtmlxWindows/codebase/ext/dhtmlxwindows_wmn.js"></script>
<script src="dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<script type="text/javascript">
function myFunction(cell,gridno,cellIndex,value){
return;
}
function local_XLr8BuildGrid(){
grid_1 = dhxLayout.cells("a").attachGrid();
grid_1.enableDragAndDrop(true);
grid_1.imgURL = "dhtmlxGrid/codebase/imgs/";
grid_1.setHeader("Driver,Type")
grid_1.setInitWidths("225,1")
grid_1.setColAlign("Left,Left")
grid_1.setColTypes("ro,ed")
grid_1.setColSorting("str,na")
grid_1.enableLightMouseNavigation(true);
grid_1.enableAutoWidth(true);
grid_1.attachEvent("onEditCell",local_XLr8EditGrid_1);
grid_1.setSkin("modern");
grid_1.init();
grid_1.setColumnIds("DriverArray,DriverType");
grid_1.enableEditTabOnly(true);
grid_2 = new dhtmlXGridObject('gridbox_2');
grid_2.enableDragAndDrop(true);
grid_2.attachEvent("onDrag",XLr8CustomDrag2);
grid_2.imgURL = "dhtmlxGrid/codebase/imgs/";
grid_2.setHeader("Pickup<br>Date,Pickup<br>Time,Load<br>Id,Roadnet,Destination,Driver1,Driver2,Equip1,Equip2,Asg,Dis,Can")
grid_2.setInitWidths("63,54,63,54,135,180,180,54,54,36,36,36")
grid_2.setColAlign("Left,Left,Left,Left,Left,Left,Left,Left,Left,Left,Left,Left")
grid_2.setColTypes("ro,ro,link,ro,ro,wbut,wbut,ed,ed,img,img,img")
grid_2.setColSorting("str,str,str,str,str,str,str,str,str,str,str,str")
grid_2.setWButFunction(5,myFunction);
grid_2.setWButFunction(6,myFunction);
grid_2.enableLightMouseNavigation(true);
grid_2.enableAutoWidth(true);
grid_2.attachEvent("onEditCell",local_XLr8EditGrid_2);
grid_2.setSkin("modern");
grid_2.init();
grid_2.setColumnIds("PickupDate,PickupTime,LoadId,RoadNet,Destination,Driver1,Driver2,Equipment1,Equipment2,AssignButton,DispatchButton,CancelButton");
grid_2.enableEditTabOnly(true);
grid_3 = dhxLayout.cells("c").attachGrid();
grid_3.enableDragAndDrop(true);
grid_3.imgURL = "dhtmlxGrid/codebase/imgs/";
grid_3.setHeader("Equipment,Type")
grid_3.setInitWidths("225,1")
grid_3.setColAlign("Left,Left")
grid_3.setColTypes("ro,ed")
grid_3.setColSorting("str,na")
grid_3.enableLightMouseNavigation(true);
grid_3.enableAutoWidth(true);
grid_3.attachEvent("onEditCell",local_XLr8EditGrid_3);
grid_3.setSkin("modern");
grid_3.init();
grid_3.setColumnIds("EquipmentArray,EquipmentType");
grid_3.enableEditTabOnly(true);
}
function local_XLr8LoadGrid1(oData){
grid_1.addRow(1,"Sam,B",1);
grid_1.addRow(1,"John,H",1);
return
}
function local_XLr8EditGrid_1(stage,rowId,cellInd){
return true;
}
function local_XLr8LoadGrid2(oData){
grid_2.addRow(1,"07/01/2009,12:00,5000,300,New York City",1);
grid_2.addRow(1,"07/02/2009,13:00,5001,301,Denver",1);
}
function local_XLr8EditGrid_2(stage,rowId,cellInd){
return true;
}
function local_XLr8LoadGrid3(oData){
    grid_3.addRow(1,"1234,C",1);
    grid_3.addRow(1,"4321,T",1);
}
function local_XLr8EditGrid_3(stage,rowId,cellInd){
return true;
}
function XLr8CustomDrag2(s_rowId,t_rowId,s_gridObject,t_gridObject,s_cellInd,t_cellInd){
if (s_gridObject==t_gridObject) return false;
var start_value = s_gridObject.cells(s_rowId,0).getValue();
var start_type = s_gridObject.cells(s_rowId,1).getValue();
var target_value = t_gridObject.cells(t_rowId,t_cellInd).getValue();    
t_gridObject.cells(t_rowId,t_cellInd).setValue(start_value);
return false;
}
</script>
</head>
<body>
<div id="XLr8objId" style="width:100%;height:100%;overflow:auto;display:none;font-family:Tahoma;font-size:11px;">
<form name=Form1 method=Post >
<table><tr><td>Open Date</td><td align=left>
<input type=Text id=OpenDate tabindex=1 name=OpenDate size=10 class=text>
</td></tr></table>
<table class=DataTable width=100%>
<tr><td>
<div id="gridbox_2" width="100%" height="650px" style=""></div>
</td></tr></table>
</div>
<div id=XLr8MoveIt style="position: relative; height: 800px;"></div>
<SCRIPT type="text/javascript">
var dhxWins = new dhtmlXWindows();
dhxWins.setImagePath("dhtmlxWindows/codebase/imgs/");
var layoutWin = dhxWins.createWindow("w1", 10, 10, 1200, 700);
layoutWin.button("close").hide();
var dhxLayout = new dhtmlXLayoutObject(layoutWin, "3J");
dhxLayout.cells("a").setText("Drivers");
dhxLayout.cells("b").setText("Detail");
dhxLayout.cells("c").setText("Equipment");
dhxLayout.cells("b").attachObject("XLr8objId");
dhxLayout.cells("b").setWidth(975);
local_XLr8BuildGrid();
local_XLr8LoadGrid1();
local_XLr8LoadGrid2();
local_XLr8LoadGrid3();
</SCRIPT>
</form>
</BODY>
</HTML>
Answer posted by Alex (support) on Jun 17, 2009 03:23

Hello, 

please, try to set z-index property in the dragSpanDiv class in the dhtmlxgrid.css

.dragSpanDiv{ z-index:100;font-size : 12px; border: 1px gray solid; background-color:white; }

Also form tag should be closed right after </table> - locally we have issues with the provided html layout:. 

Please, see attached sample 


Attachments (1)
1245233629.zip132.16 Kb