How to set row background color in dojo grid dynamically

Question

I am using Dojo 1.10, have a simple dojox.grid.DataGrid, and want to change the background color as well as font color based on data.

I wrote a onStyleRow function myStyleRow(row){ var item = grid.getItem(row.index); if(!item) return;

var mappingFlag = store.getValue(item, "flag", null);
var mappingId = store.getValue(item, "matched_mapping_id", null);

if(mappingFlag == 0){
    row.customStyles += " color:black;";
}else if(mappingFlag == 1){
    row.customStyles += " color:gray;";
}else if(mappingFlag == 2){
    row.customStyles += " color:red;";
}else if(mappingFlag == 3){
    if(mappingId == currentMappingId){
        row.customStyles += " color:blue; background-color:#fff000;";
    }else{                
        row.customStyles += " color:blue; background-color:#ffffff;"; 
    }
}

grid.focus.styleRow(row);
grid.edit.styleRow(row);

}

What drive me to chaos is that the font color (blue/red/gray) are well set and displayed, but the background color does not take any effect...

What's wrong to my code? how I can change the row background color?

Many thanks!

Last night I found in firebug that it was because I use the claro theme in body tag, which there is background picture setting in claroGrid.css, e.g. .claro .dojoxGridRowTable tr { background:url("images/row_back.png") #fff repeat-x; } After I remove this one, it got working. I am out door to css, I think there is a better way to override this css, but dont know... — JohnZhang

GoinOff GoinOff · Accepted Answer · 2015-04-16T14:53:03

Here are a couple of documents that should help you out:

Dojo Data Grid – Part 32: Setting Row Color Based on Row Data:

http://xcellerant.net/2013/11/20/dojo-data-grid-30-setting-row-color-dynamically/

and....

Dojo Data Grid – Part 34: Customizing Cell Styles Based on Data:

http://xcellerant.net/2014/01/15/dojo-data-grid-part-34-customizing-cell-styles-based-on-data/

How to set row background color in dojo grid dynamically

2 Answers