DHTMLX Docs & Samples Explorer

Smart Rendering and loading notification

This sample demonstrates how loading notification can be set

Loading portion of data
Loading

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