Using images in header

Sample: dhtmlxGrid

Using images in header

dhtmlxGrid allows using images for column headers formating. In this case you can specify different images for column header, sorted ascending and descending.

 
<div id="gridbox" width="100%" height="250px" style="background-color:white;overflow:hidden"></div>
<script> 
        mygrid = new dhtmlXGridObject('gridbox');
        mygrid.enableHeaderImages(true);//treat header labels as image file names
        mygrid.setHeader("column_a.gif,column_b.gif");
        mygrid.setInitWidths("152,152");
        ...
        mygrid.init();</script>

Some notes about using images as column headers:

create two additional images for sorting (asc,desc) using original image name as follows:

original: column_a.gif
asc: column_a.asc.gif
desc: column_a.des.gif

Take into account the difference IE and Mozilla counts the with of cell (ie: with border, mozilla - without)

Put all (three per column) images in grid images folder