<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_srnd.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>
 
 
 <div style="height:20px">
    <div id="a_1" style="color:red;">Loading portion of data</div>
</div>
<div  style='position:relative; height:250px; width:600px;'>
    <div id="gridbox" style="width:600px; height:250px; background-color:white;overflow:hidden"></div>
    <div id="cover" style='width:500px; font-size:20pt; text-align:center; font-family:Tahoma; position:absolute; top:50px; left:50px; height:150px; widht:500px; background-color:silver; opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);'>
        Loading    
    </div>
</div>
<br>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("A,B,C,D,E,F,J,H");
mygrid.setInitWidths("50,120,150,80,80,80,80,200");
mygrid.setColAlign("right,left,left,right,center,left,center,center");
mygrid.setColTypes("ed,ed,ed,price,ch,co,ro,ro");
mygrid.enableAutoWidth(true);
mygrid.getCombo(5).put(2, 2);
 
mygrid.attachEvent("onXLS", function() {
    document.getElementById("a_1").style.display = "block";
});
mygrid.attachEvent("onXLE", function() {
    document.getElementById("a_1").style.display = "none";
});
mygrid.attachEvent("onXLS", function() {
    document.getElementById('cover').style.display = 'block';
});
mygrid.attachEvent("onXLE", function() {
    document.getElementById('cover').style.display = 'none';
});
 
mygrid.setSkin("dhx_skyblue");
mygrid.init();
mygrid.enableSmartRendering(true, 50);
mygrid.loadXML("php/dynload_slow.php");</script>