<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/ext/dhtmlxgrid_validation.js" type="text/javascript" charset="utf-8"></script>
<script src='../../codebase/dhtmlxgridcell.js'></script>    
 
<div id="message" style="height:40px; font-weight:bold; color:red;"></div>
<div id="gridbox" style="width:350px;height:250px;background-color:white;overflow:hidden"></div>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath('../../codebase/imgs/');
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("100,250");
mygrid.setColAlign("right,left");
mygrid.setColTypes("ed,ed");
mygrid.enableValidation(true);
mygrid.setColValidators("NotEmpty,ValidEmail");
mygrid.setColSorting("int,str");
mygrid.enableMultiselect(true);
mygrid.attachEvent("onValidationError", function(id, ind, value) {
    mygrid.setCellTextStyle(id, ind, "font-weight:bold;");
    document.getElementById('message').innerHTML = "Error at cell (" + id + "," + ind + "), value must " + (ind == 0 ? "not be empty": "be a valid email");
    return false;
});
mygrid.attachEvent("onValidationCorrect", function(id, ind, value) {
    mygrid.setCellTextStyle(id, ind, "");
    document.getElementById('message').innerHTML = "";
    return false;
});
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid.xml");</script>