The user should not forget to include dhtmlxgrid_drag.js file into his project in order to make drag-and-drop work in the grid.

To enable/disable drag-and-drop in the grid, the user needs to do the following:

      grid.enableDragAndDrop(true|false);

The user can switch to the mode when dragged item are dropped in the target location in the same order as they were in the source grid:

        grid.enableDragOrder(mode);

To use extended mode for drag-n-drop when the user will see the number of rows dragged and availability of target under the mouse cursor, the user should set the string representing the type of dragging objects:

        grid.setDragText(single,plural);

The parameters here define text (single and plural forms) for extended visual appearance of drag-n-drop:

• single - single form (like “product”);
• plural - plural form (if omitted, then “s” will be added to the single form).

The user should apply mercy drag mode to copy records from one grid to another or within one and the same grid with drag-n-drop:

        grid.enableMercyDrag(true);

The second common use case is when some custom content needs to be shown instead of the default item text. The grid has a predefined method that is responsible for converting id of the row to its drag representation, but it can be redefined with custom logic:

        grid.rowToDragElement=function(id){
            //any custom logic here
            var text = "<img src='some.gif'> - "+grid.cells(id,0).getValue(); // prepare a text string
            return text;
        }

In the above mentioned snippet, the text of the dragged element will contain the fixed image and the value of the first column of the dragged row. As it is seen, it is possible to use any HTML inside the dragged text, so it is rather customizable.

In case of enabled multi-select in drag-and-drop, it is possible to create a drag representation that will reflect not the text of dragged items, but number of them.

        grid.rowToDragElement=function(id){
            //any custom logic here
            var text = grid._dragged.length + "item(s)";
            return text;
        }

If the user wants to show the text of all the dragged items in case of drag-and-drop with multiselect, it is possible to define a custom function as follows:

        grid.rowToDragElement=function(id){
            //any custom logic here
            var text="";
            for (var i=0; i<this._dragged.length; i++)
                text += grid.cells(grid._dragged[i].idd,0).getValue() + "<br/>";
            return text;
        }

Data conversion is required when drag-and-drop 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.getColumnsNum(); i++)    // for each cell in the source grid
                z[i]=sgrid.cells(rowId,i).getValue();         // prepare data for the target grid
            return z;
        }

The parameters of gridToGrid() method are:

• rowId - id of dragged row;
• sgrid - source grid object;
• tgrid - target grid object.

The method returns array of values for cells in the target grid row.

The snippet mentioned above 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 drag-and-drop process occurs from the tree to the 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 the tree
        }
    grid.treeToGridElement = function(tree,treeID,gridID){
        var z=[treeObj.getItemText(treeID)];  // set tree text as a value of the first column in the grid
        return z;
    }

The user can activate the functionality that will allow to move columns with drag-and-drop:

          grid.enableColumnMove(true); // 
to prohibit/allow moving some (or all) columns in some condition use the event handler (moving is allowed in case of return true)           
          grid.attachEvent("onBeforeCMove",function(sInd,tInd){
              return confirm("Allow move column "+sInd+" to position "+tInd); // return true to allow moving, false - to prohibit it
          });

Drag-and-drop behavior can be set in the following way:

        grid.setDragBehavior(sibling); // sibling - drop as sibling