DHTMLX Docs & Samples Explorer

### Drag and Drop between Grids

dhtmlxGrid supports drag-n-drop not only within one grid, but between grids as well. Check out this functionality in the sample below.

Source

    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.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>

    <table width="800px">
        <tr>
            <td>
                <div id="gridbox2" style="width:270px;height:270px;background-color:white;"></div>
            </td>
            <td>
                <div id="gridbox3" style="width:500px;height:270px;background-color:white;"></div>
            </td>
        </tr>
    </table>
    <script>mygrid = new dhtmlXGridObject('gridbox3');
    mygrid.selMultiRows = true;
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
    mygrid.setInitWidths("50,150,120,80,80,80,80,200");
    mygrid.setColAlign("right,left,left,right,center,left,center,center");
    mygrid.setColTypes("dyn,ed,ed,price,ch,coro,ra,ro");
    mygrid.setColSorting("int,str,str,int,str,str,str,date");
    mygrid.setMultiLine(false);
    mygrid.enableDragAndDrop(true);
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.loadXML("../common/grid.xml");

    treeGrid = new dhtmlXGridObject('gridbox2');
    treeGrid.selMultiRows = true;
    treeGrid.setImagePath("../../codebase/imgs/");
    treeGrid.setHeader("Alpha,Betta");
    treeGrid.setInitWidths("100,150");
    treeGrid.setColAlign("right,left");
    treeGrid.setColTypes("ed,ed");
    treeGrid.setColSorting("int,str");
    treeGrid.setMultiLine(false);
    treeGrid.enableDragAndDrop(true);
    treeGrid.init();
    treeGrid.setSkin("dhx_skyblue");
    treeGrid.loadXML("../common/dynscroll.xml");</script>