BigAssBeats

Sections

Personal tools

Document Actions

grid_header_img

Sample: dhtmlxGrid

Using images in header

dhtmlxGrid main page

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