Setting cells and column properties

Using eXcell technology (extended cells) you can define the formating for each column of the javascript grid and the editor to edit it.
For more details and the list of available cell types see "Column Types" and "Using eXcell" chapters of Documentation Guide.
During grid initialization you also can define:

column alignment - setColAlign
header labels - setHeader
sorting type - setColSorting
column initial width - setInitWidths

</> Source

<!DOCTYPE html>
<html>
<head>
	<title>Setting cells and column properties</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("80,150,100,80,80,80,80,100");
			myGrid.setColAlign("right,left,left,right,center,left,center,center");
			myGrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");
			myGrid.setColSorting("int,str,str,int,str,str,str,date");
			//set values for select box in 5th column
			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.load("../common/grid.xml");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Setting cells and column properties</h1>
	<p>
		Using eXcell technology (extended cells) you can define the formating for each column of the javascript grid and the editor to edit it.<br>
		For more details and the list of available cell types see <strong>"Column Types"</strong> and <strong>"Using eXcell"</strong> chapters of Documentation Guide.<br>
		During grid initialization you also can define:
	<ul>
		<li>column alignment - <code>setColAlign</code></li>
		<li>header labels - <code>setHeader</code></li>
		<li>sorting type - <code>setColSorting</code></li>
		<li>column initial width - <code>setInitWidths</code></li>
	</ul>
	</p>
	<div id="gridbox" style="width:750px;height:350px;overflow:hidden"></div>
	<br />
</body>
</html>

Documentation

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