format dojo DataGrid header row

Question

I want to assign a background color to my programmatically created Dojo DataGrid's header row. I've tried to override the defaults by adding .dojoxGridHeader or .dojoxGrid-Header to my style sheet, but these have no effect.

Is there another way, such as with a Dojo event or property? If my style sheet is the only way to go, am I using the wrong class?

Thanks! Alan

Answer 1

With the help of Internet Explorer's "Developer Tools," I discovered which CSS classes controlled the styling of the Dojo DataGrid header row.

I needed to add ".tundra" in front of .dojoxGridHeader because the .tundra stylesheet is at the top of the hierarchy.

This worked for me:

.tundra .dojoxGridHeader, .tundra .dojoxGridHeader .dojoxGridCell {

    vertical-align: bottom;
    color: #FFFFFF !important;
    background: #530619;
    border-color: #ECE2D8;
    font-weight: bold;
}

Answer 2

Add both styles:

.dojoxGridHeader .dojoxGridCell {
        background-image: none !important;
        background-color: #A6BB3F !important;
}

.dojoxGridHeader .dojoxGridCell div {
        color: black;           
}