DHTMLX Docs & Samples Explorer

Control Drop

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:

  • block d-n-d operation:
  mygrid.attachEvent("onDrag",function(sid,tid){
      if (!some_check(sid,tid)) return false; //block d-n-d
      return true;
  });
  • dynamically switch between move and copy behaviors:
  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:

  1. dragContext.source - type of the source component (“tree”,”grid”,”treeGrid”);
  2. dragContext.target - type of the target component;
  3. dragContext.sobj - the source object;
  4. dragContext.tobj - the target object;
  5. dragContext.dropmode - whether the dragged item will be a “child” or a “sibling”;
  6. dragConetxt.mode - whether the dragged item will be copied or just moved: “copy” or “move”;
  7. dragContext.slist() - ID(s) of the dragged item(s);
  8. dragContext.tid - ID of the drag landing item;

Any of these properties can be changed, and further dragging process will use the changed value instead of the original one.

  • just fire some custom functionality instead of moving an item:
  mygrid.attachEvent("onDrag",function(sid,tid){
      some_custom_code(sid,tid);
      return false;
  });
  • moving an item, but with some specific rules:
  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;
    }