<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:325px;height:260px;background-color:white;overflow:hidden"></div>
<img src='../../samples/common/column_a.gif' style='visibility:hidden'>
<img src='../../samples/common/column_b.gif' style='visibility:hidden'>
<br>
    <strong>Some notes about using images as column headers:</strong>
        <li>create two additional images for sorting (asc,desc) using original image name as follows:</li>
            <ul type="square">
            <li>original: column_a.gif</li>
            <li>asc: column_a.asc.gif</li>
            <li>desc: column_a.des.gif</li>
            </ul>
        <li>Take into account that IE and Mozilla count the width of cell differently (ie: with border, mozilla: without)</li>
        <li>Put all (three per column) images in grid images folder.</li>        
<script>
function init_grid(argument) {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.enableHeaderImages(true);
    mygrid.setHeader("../../samples/common/column_a.gif,../../samples/common/column_b.gif");
    mygrid.setInitWidths("160,160");
    mygrid.setColAlign("right,left");
    mygrid.setColTypes("ro,ed");
    mygrid.setColSorting("int,str");
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.loadXML("../common/grid.xml");
}</script>