Change header cell color (cell by cell)

I'd like to change an individual header cell color (font or background). The following code changes a cell color (row=1, col=5) but this code does not apply to the header. Any help would be appreciated.

..............

obj.defineCellProperty("color", function(col, row){
if (row==0) {
return "blue";
} else {
return "green";
}
});

obj.getCellTemplate(4).setStyle("color", function(){
return this.getControlProperty("color");
});

document.write(obj);

Hey Brian,

I've not actually done this, but I am aware that Alex has seperate models for cell and header. Perhaps you can try obj.defineHeaderProperty()?

Thanks for the response. I'll try it and let you know.

Brian,

here is the code which will work with headers -

obj.defineHeaderProperty("color", function(col, row){
    if (row==0) {
        return "blue";
    }
    else {
        return "green";
    }
});

obj.getHeaderTemplate(4).setStyle("color", function(){
    return this.getControlProperty("color");
});

However if your styles are static you can simply use

obj.getHeaderTemplate(0, 1).setStyle("color", "red");

or in CSS

#myGrid-header-0-1 {color: red}

Alex...

The above code doesn't appear to work for the actual background color for a header cell. eg.

obj.getHeaderTemplate(1).setStyle("background", "blue");

Is there some other property that handles this or do I need to drill farther down in the DOM.

Mb

In XP theme (skin) the background is applied both to the outer and inner spans of the header box. You have to clear the background of the inner span and you have to use !important flag:

.aw-grid-headers .aw-column-1 {
background: blue!important;
}


.aw-grid-header .aw-item-box {
background: none;
}

I found another way to do this is to use the id:

#myGrid-header-0-0-box {
background: green
}

this way the three-d background toward the bottom remains.