DHTMLX Docs & Samples Explorer

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
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>
<style type="text/css" media="screen">
/*custom styling for the first column*/
.form_cell{
    background-image:url(../../codebase/imgs/skin_light_header.png);
    border-color:#FDFDFD #93AFBA #93AFBA #FDFDFD !important;
    border-style:solid !important;
    border-width:1px !important;
}
</style>
<script>
function loadGridFromString() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.enableAutoHeight(true);
    mygrid.setSkin("light");
    mygrid.loadXMLString(document.getElementById("tcont1").value);
}
function loadGrid2() {
    mygrid2 = new dhtmlXGridObject('gridbox2');
    mygrid2.setImagePath("../../codebase/imgs/");
    mygrid2.setSkin("dhx_skyblue");
    mygrid2.loadXML("../common/gridH.xml");
}
</script> <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="160px"></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="600px" height="160px"></div> </td><td> <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 />