Change Grid's parent object

You can use attachToObject method to move grid from one place to another switching its parent items.

Parameters passed to the constructor are:

object to attach grid to (should be loaded before calling constructor)

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>    
 
<table width="600px">
    <tr>
        <td id="parent1" style="border:1px solid red">&nbsp;
            <div id="gridbox" style="width:500px; height:150px; background-color:white;overflow:hidden"></div>
        </td>
        <td><input type="button" onClick="moveTo('parent1')" value="&lt; Move Here" /></td>
    </tr>
    <tr>
        <td id="parent2" style="border:1px solid blue">&nbsp;</td>
        <td><input type="button" onClick="moveTo('parent2')" value="&lt; Move Here" /></td>
    </tr>
    <tr>
        <td id="parent3" style="border:1px solid green">&nbsp;</td>
        <td><input type="button" onClick="moveTo('parent3')" value="&lt; Move Here" /></td>
    </tr>
</table>
    <strong>Parameters passed to the constructor are:</strong>
        <ul>
            <li>object to attach grid to (should be loaded before calling constructor)</li>
        </ul>
<script>//switch parent to new one;
function moveTo(objId) {
    mygrid.attachToObject(document.getElementById(objId))
    }
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title");
mygrid.setInitWidths("100,*");
mygrid.setColAlign("right,left");
mygrid.setColTypes("dyn,ed");
mygrid.setColSorting("int,str");
mygrid.enableMultiselect(true);
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid.xml");</script>