Paginal Output :: Insert/Delete/Move column

Inserting and deleting row, column and moving operations with paginal output are demonstrated in this sample.

THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../../codebase/ext/dhtmlxgrid_pgn_bricks.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/ext/dhtmlxgrid_mcol.js"></script>    
<script  src="../../codebase/ext/dhtmlxgrid_pgn.js"></script>    
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
<script>var mygrid;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Column A, Column B");
    mygrid.setInitWidths("100,250");
    mygrid.setColAlign("right,left");
    mygrid.setColTypes("ro,ed");
    mygrid.setColSorting("na,na");
    mygrid.enablePaging(true, 30, null, "pagingArea", true, "recinfoArea");
    mygrid.enableColumnMove(true);
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.setPagingSkin("bricks");
    mygrid.loadXML("php/dynscroll.php");
}</script>
 
 
<table width="600">
    <tr>
        <td id="recinfoArea"></td>
    </tr>
    <tr>
        <td>
            <div id="gridbox" style="width:62%; height:250px; background-color:white;overflow:hidden"></div>
        </td>
    </tr>
    <tr>
        <td id="pagingArea"></td>
    </tr>
</table>
<a href="#" onClick="mygrid.deleteColumn(this.nextSibling.value);">Delete Column</a><select>
    <option value="0">0</option><option value="1">1</option></select>
    <br>
<a href="#" onClick="mygrid.insertColumn(this.nextSibling.value,'New','ed',200);">Insert new column at</a><select>
    <option value="0">0</option><option value="1">1</option></select>