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.