You can set different cell editors for cells in column
<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></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 />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"); }
All components
dhtmlxGrid
Cell types (eXcells)
View page source