DHTMLX Docs & Samples Explorer

Saving\restoring columns' states

Try to sort, move columns or change their width and then reload page. Grid's API allows to restore these states automatically or on demand *

Automatically Save\Restore columns' states


* - cookies must be enabled
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/ext/dhtmlxgrid_ssc.js"></script>
<script  src="../../codebase/ext/dhtmlxgrid_mcol.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>
 
 
 
<table width="600" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="gridbox" style="width:100%;height:270px;background-color:white;"></div>
            <div align="center">
            <table cellspacing="3" cellpadding="0" border="0">
            <tr><td align="right"> <input type="button" name="a1" value="save columns width" onclick="mygrid.saveSizeToCookie()"></td><td width="5" rowspan="3"></td><td bgcolor="black" rowspan="3" width="1"></td><td width="5" rowspan="3"></td><td><input type="button" name="a1" value="restore columns width" onclick="mygrid.loadSizeFromCookie()"></td></tr>
            <tr><td align="right"><input type="button" name="a1" value="save sorting" onclick="mygrid.saveSortingToCookie()"></td><td><input type="button" name="a1" value="restore sorting" onclick="mygrid.loadSortingFromCookie()"></td></tr>
            <tr><td align="right"><input type="button" name="a1" value="save order" onclick="mygrid.saveOrderToCookie()"></td><td><input type="button" name="a1" value="restore order" onclick="mygrid.loadOrderFromCookie()"></td></tr>
            </table>
                </div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="gridbox2" style="width:100%;height:270px;background-color:white;"></div>
        </td>
    </tr>
</table>
<br>
* - cookies must be enabled
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.enableColumnMove(true);
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/gridH.xml");
mygrid2 = new dhtmlXGridObject('gridbox2');
mygrid2.setImagePath("../../codebase/imgs/");
mygrid2.enableColumnMove(true);
mygrid2.setSkin("dhx_skyblue");
mygrid2.loadXML("../common/gridH.xml", function() {
    mygrid2.loadOrderFromCookie();
    mygrid2.loadSortingFromCookie();
    mygrid2.loadSizeFromCookie();
    mygrid2.enableAutoSizeSaving();
    mygrid2.enableSortingSaving();
    mygrid2.enableOrderSaving();
});
</script>