DHTMLX Docs & Samples Explorer

Date/Decimal format

You have possibility to edit data in columns of the grid. Try to edit Calendar and Numeric fields:

Format of the first column:
Format of the second column:
Format of the third column (d,m,y):
Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>
<script  src="../../../dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxCalendar/codebase/skins/dhtmlxcalendar_dhx_skyblue.css">
<script  src="../../codebase/excells/dhtmlxgrid_excell_dhxcalendar.js"></script>
 
 
    
<div id="gridbox" style="width:400px;height:210px;background-color:white;"></div>
Format of the first column: 
<input id='a01' value='$0,000'><input type='button' value='Update' onclick='doItOnce(this.previousSibling.value,0)'><br/>
Format of the second column: 
<input id='a01' value='@000.00Zbh'><input type='button' value='Update' onclick='doItOnce(this.previousSibling.value,1)'><br/>
Format of the third column (d,m,y): 
<input id='a01' value='%Y-%d/%m'><input type='button' value='Update' onclick='doItOnce(this.previousSibling.value,2)'>
<script>
var prev_format = "%d/%m-%Y";
function doItOnce(a, b) {
    var z = mygrid.serialize();
    mygrid.clearAll();
    if (b != 2) {
        mygrid.setNumberFormat(a, b);
        mygrid.setDateFormat(prev_format, prev_format);
    } else {
        mygrid.setDateFormat(a, prev_format);
        prev_format = a;
    }
    mygrid.loadXMLString(z);
}
</script> <br> <script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("N.format,N.format,Date format");
mygrid.setInitWidths("100,100,200");
mygrid.setColAlign("right,left,center");
mygrid.setColTypes("edn,edn,dhxCalendar");
mygrid.setDateFormat("%d/%m-%Y");
mygrid.setNumberFormat("$0,000", 0);
mygrid.setNumberFormat("@000.00Zbh", 1);
mygrid.setColSorting("int,int,date");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_formatting.xml");
</script>