DHTMLX Docs & Samples Explorer

Skinning

You have wide rage of skins to apply into your grid. Check out this functionality by applying one of the skins from the select box below:

Choose skin to apply:
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>    
 
<script>
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales Dynamic,Title,Description,Price,In Store,Shipping,Date of Publication");
    mygrid.setInitWidths("120,150,*,50,80,80,150");
    mygrid.setColAlign("right,left,left,right,center,right,center");
    mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ro");
    mygrid.setColSorting("int,str,str,int,str,str,na");
    mygrid.getCombo(5).put(1, "1 hour");
    mygrid.getCombo(5).put(12, "12 hours");
    mygrid.getCombo(5).put(24, "24 hours");
    mygrid.getCombo(5).put(48, "2 Days");
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.loadXML("../common/grid_big_18_styles_skins.xml");
}
</script> <div style="margin:20px;"> Choose skin to apply: <select onChange="mygrid.setSkin(this.value)"> <option value="sbdark">sb dark <option value="gray">gray <option value="mt">mt <option value="xp">xp <option value="clear">clear <option value="modern">modern <option value="light" >light <option value="dhx_skyblue" selected>skyblue </select> </div> <div id="gridbox" style="width:100%;height:400px;background-color:white;"></div>