DHTMLX Docs & Samples Explorer

Colorpicker eXcell

There is possiblity in dhtmlxGrid to edit color of any cell using Colorpicker.

Current example also uses onCellEdit event handler to populate corresponding text cell with color value chosen with color picker and vice versa.

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>
 
 
<div id="gridbox" style="width:500px;height:160px;background-color:white;"></div>
<script>
function doOnColorChanged(stage, rId, cIn) {
    if (stage == 2) {
        if (cIn == 0) {
            mygrid.cells(rId, 1).setValue(mygrid.cells(rId, 0).getValue());
        } else if (cIn == 1) {
            mygrid.cells(rId, 0).setValue(mygrid.cells(rId, 1).getValue());
        }
    }
    return true;
}
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Color Name,Color");
mygrid.setInitWidths("80,*");
mygrid.setColAlign("left,center");
mygrid.setColTypes("ed,cp");
mygrid.setColSorting("str,str");
mygrid.attachEvent("onEditCell", doOnColorChanged);
mygrid.setSkin("dhx_skyblue");
mygrid.enableAutoHeight(true);
mygrid.init();
mygrid.loadXML("../common/colors.xml");
</script>