<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>