After the item was dragged and dropped, the next stage of process is initiated - the item needs to be correctly inserted in its new place. And again there is no need to do anything, but default existing logic that will process operation on its own. But in some cases we need to customize the operation:
mygrid.attachEvent("onDrag",function(sid,tid){ if (!some_check(sid,tid)) return false; //block d-n-d return true; });
mygrid.attachEvent("onDrag",function(sid,tid){ if (!some_check(sid,tid)) mygrid.dragContext.mode="copy"; // copy item instead of moving it return true; });
The dragContext object is available during the onDrag event and it contains the following properties:
Any of these properties can be changed, and further dragging process will use the changed value instead of the original one.
mygrid.attachEvent("onDrag",function(sid,tid){ some_custom_code(sid,tid); return false; });
mygrid.attachEvent("onDrag",function(sid,tid){ mygrid.moveRowTo(sid,someID,"copy","sibling"); //moving an item as a sibling of some other element return false; // block default d-n-d });
Data conversion is required when d-n-d process occurs between different grids. This can be done by redefining gridToGrid method:
grid.gridToGrid = function(rowId,sgrid,tgrid){ var z=[]; for (var i=0; i<sgrid.getColumCount(); i++) // for each cell in the source grid z[i]=sgrid.cells(rowId,i).getValue(); // prepare data for target grid return z; }
This snippet just copies the data, without applying any modifications to it. In a real application it may change data order or add|delete some of it.
In case when d-n-d process occurs from tree to grid, the same can be done by redefining treeToGridElement or gridToTreeElement:
grid.gridToTreeElement = function(tree,treeID,gridID){ return this.cells(gridId,0).getValue(); // take data from the first column as a value for tree }
grid.treeToGridElement = function(tree,treeID,gridID){ var z=[treeObj.getItemText(treeID)]; //set the tree text as a value of the first column in the grid return z; }