Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Kathy on Jun 29, 2009 05:29
open dhtmlx forum
Data Processor and Drag-n-Drop in the Grid

I can't seem to get Drag-n-Drop work with Data Processor. It doesn't generate any events, whichever mode I tried. I distilled code to a very small sample, could you take a look? If I edit the cell or delete or add row - Data Processor works nicely. But does nothing for drag-n-drop! I have dhtmlxDataProcessor v.2.1 Professional edition build 90226. Thanks!!

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

<script src="../codebase/dhtmlxdataprocessor.js"></script>
<script src="../codebase/dhtmlxdataprocessor_debug.js"></script>

<script>

function doInit(){
var dgrid = new dhtmlXGridObject('devGrid');
dgrid.setImagePath("../codebase/imgs/");
dgrid.setHeader("Device Name");
dgrid.setInitWidths("*");
dgrid.setColAlign("left");
dgrid.setSkin("light");
dgrid.setColSorting("na");
dgrid.setColTypes("ed");
dgrid.enableDragAndDrop(true);
dgrid.init();
dgrid.loadXML("pbconfigfeeder.jsp?type=devices");

    var dp = new dataProcessor("pbconfigfeeder.jsp");
    dp.setUpdateMode("cell", true);
    dp.init(dgrid);
}

</script>

<body onload="doInit()">
<div id="devGrid" style="width:600px;height:600px;"></div>
</body>


Answer posted by dhxSupport on Jun 29, 2009 06:23
Are you implementing drag-n-drop inside one grid or between 2 grids? If you are using drag-n-drop inside the same grid dataProcessor should not send any information to the server side because of it can send information about deleting, inserting or editing rows. While drag-n-drop none of those operations occurs. To send information to the server side after drag-n-drop operation you should mark dropped row as edited:
dp.setUpdated(rowId,state,mode) where 
rowId - id of row to set update-status for
state - true for “updated”, false for “not updated”
mode - update mode name (insert, delete, update)

To check if drag-n-drop operation was finished you can use "onDrop" event. This event passes the following parameters: 
sId - id of the source item;
tId - id of the target item;
dId - id of the dropped item (has sense for mercy drag-n-drop);
sObj - source grid object;
tObj - target grid object;
sCol - index of the column from which drag started;
tCol - index of the column in which drop occurs.
  grid.attachEvent("onDrop", function(sId,tId,dId,sObj,tObj,sCol,tCol){});

Answer posted by Kathy on Jun 29, 2009 06:33
Thank you, marking it updated in onDrop works.