DHTMLX Docs & Samples Explorer

Fast row adding

The fastest way for loading data is loading them from XML, in some cases, group of rows must be added by script. The following extension allows to do it much faster (2-5 times faster as compared with normal case)


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_fast.js"></script>
<style>
    .even{
        background-color:silver;
    }
    .uneven{
        background-color:white;
    }        
</style>        
 
 
<table width="600">
    <tr>
        <td valign="top">
            <div id="gridbox" style="width:450px;height:250px;background-color:white; "></div>
        </td>
    </tr>
    <tr>
        <td>
            <div><input id='z1' type="button"  onclick='adds();' value='add 100 rows'></div>
            <div><input id='z1' type="button"  onclick='add_fast();' value='add 100 rows (fast)'></div>
        </td>
    </tr>
</table>
<br>
 
<script>
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Column A,Column B,Column C");
    mygrid.setInitWidths("150,150,150");
    mygrid.setColAlign("right,left,left");
    mygrid.setColTypes("ed,ed,ed");
    mygrid.setColSorting("int,str,int");
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
}
function adds() {
    mygrid.clearAll();
    var z = (new Date()).valueOf();
    for (var i = 99; i >= 0; i--) {
        mygrid.addRow(i, [0, 'new', i]);
    };
    alert("Time: " + ((new Date()).valueOf() - z) + "ms");
}
function add_fast() {
    mygrid.clearAll();
    var z = (new Date()).valueOf();
    mygrid.startFastOperations();
    for (var i = 99; i >= 0; i--) {
        mygrid.addRow(i, [0, 'fast', i]);
    };
    mygrid.stopFastOperations();
    alert("Time: " + ((new Date()).valueOf() - z) + "ms");
}
</script>