Smart Rendering with dynamic loading and buffering

To increase grid performance working with large amount of data you can enable Smart Rendering with dynamical loading of rows from server (already loaded rows remain on client side).

To do this you need to add the following javascript command:
yourGrid.enableSmartRendering(mode,totalRows,bufferSize);

- and make your server side output records based on incoming parameters:

posStart -the first row in portion

count - number of rows to return

and the total number of rows which is set by total_count attribute in the tag

Loading portion of data

* - in the current sample total number of rows is 2,000 ** - server response is showed down to inform you when new portion loaded

</> Source

<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Smart Rendering with dynamic loading and buffering</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,150,100,80,80,80,80,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.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,50);
			myGrid.load("php/dynload_slow.php");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Smart Rendering with dynamic loading and buffering</h1>
	<p> To increase grid performance working with large amount of data you can enable <strong>Smart Rendering</strong> with dynamical loading of rows from server (already loaded rows remain on client side).
		<br><br>
		To do this you need to add the following javascript command:
		<br>
		<code>yourGrid.enableSmartRendering(mode,totalRows,bufferSize);</code>
		<br><br>
		- and make your server side output records based on incoming parameters: <br>
	<li>posStart -the first row in portion</li>
	<li>count - number of rows to return</li><br/>and the total number of rows which is set by total_count attribute in the <rows> tag
		</p>
		<div style="height:20px">
			<div id="a_1" style="color:red;">Loading portion of data</div>
		</div>
		<div id="gridbox" style="width:750px;height:400px;overflow:hidden"></div>
		<p style="color:gray;">
			* - in the current sample total number of rows is 2,000
			** - server response is showed down to inform you when new portion loaded
		</p>
</body>
</html>

Documentation

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