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.