DHTMLX Docs & Samples Explorer

Smart Rendering (static)

To increase grid performance working with rather large amount of data you can enable Smart Rendering.

The simplest option is to use it with single loading. In this case entire data will be loaded from server at once and it will not be more attempts to load additional portions of data.
Big advantage of this way is that you manipulate all rows (even those rows which are not rendered yet) with javascript methods of the grid (try to change selected row using links below the grid).
No additional programming is required for existing grids - just enable Smart Redering with the enableSmartRendering(true) command.

Loading whole data (2,000 rows) at once
Select row with id=r212; mygrid.selectRowById("r212");
Select row with id=r512; mygrid.selectRowById("r512");
Select row with id=r786; mygrid.selectRowById("r786");
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 whole data (2,000 rows) at once</div>
</div>
<div id="gridbox" style="width:600px; height:250px; background-color:white;overflow:hidden"></div>
<a href="javascript:void(0)" onclick='mygrid.selectRowById("r212");'>Select row with id=r212; mygrid.selectRowById("r212");</a><br/>
<a href="javascript:void(0)" onclick='mygrid.selectRowById("r512");'>Select row with id=r512; mygrid.selectRowById("r512");</a><br/>
<a href="javascript:void(0)" onclick='mygrid.selectRowById("r786");'>Select row with id=r786; mygrid.selectRowById("r786");</a><br/>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
mygrid.setInitWidths("50,150,120,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.getCombo(5).put(2, 2);
mygrid.setColSorting("int,str,str,int,str,str,str,date");
 
mygrid.attachEvent("onXLS", function() {
    document.getElementById("a_1").style.display = "block";
});
mygrid.attachEvent("onXLE", function() {
    document.getElementById("a_1").style.display = "none";
});
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.enableSmartRendering(true);
mygrid.loadXML("../common/smartrend.xml");
</script>