Refresh grid from XML

Refresh operation doesn't recreate grid, it just updates data in it, as result the state of grid is fully preserved.

Sales
edtxt
ed
Price
In Store
Shipping
Bestseller
Date of Publication

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Refresh grid from XML</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>
	<style>
		.even{
			background-color:#E6E6FA;
		}
		.uneven{
			background-color:#F0F8FF;
		}
	</style>
	<script>
		var myGrid;
		function doOnLoad(){
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.setHeader("Sales,edtxt,ed,Price,In Store,Shipping,Bestseller,Date of Publication");
			myGrid.setInitWidths("70,150,100,80,80,80,80,100");
			myGrid.setColAlign("right,left,left,right,center,left,center,center");
			myGrid.setColTypes("dyn,edtxt,ed,price,ch,co,ra,ro");
			myGrid.setColSorting("int,str,str,int,str,str,str,date");
			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.enableAutoWidth(true);
			myGrid.enableAutoHeight(true);
			myGrid.init();
			myGrid.enableAlterCss("even","uneven");
			myGrid.load("../common/grid.xml");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Refresh</h1>
	<p>Refresh operation doesn't recreate grid, it just updates data in it, as result the state of grid is fully preserved.</p>
	<div id="gridbox" style="width:7px;height:350px;overflow:hidden"></div>
	<br>
	<div><a href="#" onClick="myGrid.clearAll(); myGrid.load('../common/first.xml');">Reload grid - classic way</a></div>
	<div><a href="#" onClick="myGrid.load('../common/second.xml');">Reload grid - clear grid from XML</a></div>
	<div><a href="#" onClick="myGrid.updateFromXML('../common/third.xml');">Reload grid - refresh data only </a></div>
</body>
</html>

Documentation

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