Per-cell eXcell

You can set different cell editors for cells in column

Setting cell types in xml


Setting cell types with script methods


</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Per-cell eXcell</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 type="text/css" media="screen">
		/*custom styling for the first column*/
		.form_cell{
			border-color:#FDFDFD #93AFBA #93AFBA #FDFDFD !important;
			border-style:solid !important;
			border-width:1px !important;
		}
	</style>
	<script>
		var myGrid, myGrid2;
		function loadGridFromString(){
			myGrid = new dhtmlXGridObject('gridbox');
			myGrid.setImagePath("../../../codebase/imgs/");
			myGrid.enableAutoHeight(true);
			myGrid.parse(document.getElementById("tcont1").value);
		}
		function loadGrid2(){
			myGrid2 = new dhtmlXGridObject('gridbox2');
			myGrid2.setImagePath("../../../codebase/imgs/");
			myGrid2.load("../common/gridH.xml");
		}
	</script>
</head>
<body onload="loadGridFromString();loadGrid2()">
	<h1>Per-cell eXcell</h1>
	<p>You can set different cell editors for cells in column<p>
	<h3>Setting cell types in xml</h3>
	<div id="gridbox" width="600px" height="200px"></div>
	<br />
	<textarea id="tcont1" style="width:600px;height:100px;display:none"><?xml version="1.0" encoding="UTF-8"?>
	<rows>
		<head>
			<column width="200" type="ro" align="left" color="#D4D0C8" sort="na">Form Fields</column>
			<column width="*" type="coro" align="left" sort="na">Field Values
				<option value="1">Worker</option>
				<option value="2">Office Manager</option>
				<option value="3">Car Driver</option>
				<option value="4">Programmer</option>
			</column>
		</head>
		<row id="1">
			<cell class='form_cell'>First, Last Name</cell>
			<cell type="ed">John, Bossom</cell>
		</row>
		<row id="2">
			<cell class='form_cell'>Profession</cell>
			<cell>1</cell>
		</row>
		<row id="3">
			<cell class='form_cell'>Salary</cell>
			<cell type="price" style="text-align:right">1500</cell>
		</row>
		<row id="4">
			<cell class='form_cell'>High Education</cell>
			<cell type="ch">1</cell>
		</row>
		<row id="6">
			<cell class='form_cell'>Age</cell>
			<cell type="ed">29</cell>
		</row>
		<row id="7">
			<cell class='form_cell'>Comments</cell>
			<cell type="txt">
				Some
				Multiline content
			</cell>
		</row>
		<row id="5">
			<cell class='form_cell'>Color of blood</cell>
			<cell type="cp">red</cell>
		</row>
	</rows>
	</textarea>

	<h3>Setting cell types with script methods</h3>
	<table border="0" cellspacing="5" cellpadding="5">
		<tr><td>
	<div id="gridbox2" width="594px" height="350px"></div>
		</td><td valign="top">
	<div style="float:left">
	<ul>
		<li><a href="javascript:void(0)" onclick="myGrid2.editStop(); myGrid2.setRowExcellType(myGrid2.getSelectedId(),document.getElementById('editorsLst').value)">Set Selected Row cells Type to</a>
			<select id="editorsLst">
				<option value="ed">[ed] Simple Editor
				<option value="txt">[txt] Multiline Editor
				<option value="ch">[ch] Checkbox
				<option value="dyn">[dyn] Dynamic
			</select>
		</li>
		<li><a href="javascript:void(0)" onclick="myGrid2.editStop(); myGrid2.setCellExcellType(myGrid2.getSelectedId(),myGrid2.getSelectedCellIndex(),document.getElementById('editorsLst2').value)">Set Selected Cell Type to</a>
			<select id="editorsLst2">
				<option value="ed">[ed] Simple Editor
				<option value="txt">[txt] Multiline Editor
				<option value="ch">[ch] Checkbox
				<option value="dyn">[dyn] Dynamic
			</select>
		</li>
		<li><a href="javascript:void(0)" onclick="myGrid2.editStop(); myGrid2.setColumnExcellType(myGrid2.getSelectedCellIndex(),document.getElementById('editorsLst3').value)">Set Column (by selected cell) Type to</a>
			<select id="editorsLst3">
				<option value="ed">[ed] Simple Editor
				<option value="txt">[txt] Multiline Editor
				<option value="ch">[ch] Checkbox
				<option value="dyn">[dyn] Dynamic
			</select>
		</li>
	</ul>
	</div>
		</td></tr>
	</table>
	<br />
</body>
</html>

Documentation

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