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");

</> Source

<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Smart Rendering (static)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myGrid;
		function doOnLoad(){
			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,80,250,70,70,70,70,100");
			myGrid.setColAlign("right,left,left,right,center,left,center,center");
			myGrid.setColTypes("ed,ed,ed,price,ch,co,ro,ro");
			var combobox = myGrid.getCombo(5);
			combobox.put("1","1 Hour");
			combobox.put("12","12 Hours");
			combobox.put("24","24 Hours");
			combobox.put("48","2 days");
			combobox.put("168","1 week");
			combobox.put("pick","pick up");
			combobox.put("na","na");
			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.enableAutoWidth(true);
			myGrid.init();
			myGrid.enableSmartRendering(true);
			myGrid.load("../common/smartrend.xml");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Smart Rendering with single loading</h1>
	<p>To increase grid performance working with rather large amount of data you can enable <strong>Smart Rendering</strong>.</p>
	<p>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.<br />
		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).<br />
		No additional programming is required for existing grids - just enable Smart Redering with the  <code>enableSmartRendering(true) </code>command.</p>
	<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:750px; height:450px; 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/>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.