Updating Dojo Enhanced Grid Row Style - Post Store Fetch

Question

Using Dojo I've setup a grid which links to a data store. After the grid load I've got a connect function which loops through the rows and sets the row text colour based on the value of a cell. This works fine (code copied below).

var gagrid = new dojox.grid.EnhancedGrid({
query: {
Keyword: '*'
},
store: gastore,
structure: galayout,
escapeHTMLInData: false,
plugins: {
nestedSorting: true
}
},
document.createElement('div'));

dojo.connect(gagrid, 'onStyleRow', this, function(row) {
var item = gagrid.getItem(row.index);

if (item) {
var value = gagrid.store.getValue(item, "Performance", null);
if (value == 3) {
row.customStyles += "color: green;";
} else if (value == 2) {
row.customStyles += "color: red;";
}
}
gagrid.focus.styleRow(row);
gagrid.edit.styleRow(row);
});

I've got abit of functionality after the page / grid loads (through user interaction) which uses the store fetch function. It loops through the rows of my grid store and changes the value of a cell depending on the user input. Again, this works fine, the values in the grid are updated correctly. Code below.

gastore.fetch({
query: {Keyword: '*'},
onComplete: function(items, request){
var i;
for (i = 0; i < items.length; i++) {
var item = items[i];
var performance;
if(parseInt(items[i]["Visits"])>=rp)
{
if(parseInt(items[i]["Bounce"])<=rb&&parseInt(items[i]["Time"])>=rmp)
{
performance=3;
}
else
{
performance=2;
}
}
else
{
performance=1;
}
gastore.setValue(item,"Performance",performance);
}
}
});

However, once the values have been updated, the custom styles aren't applied to the rows instantly. For example, the text colour of a row remains green when it should change to black.

Once the grid has been interacted with (eg. sorting a column) the row colours update to their correct colours.

Is there any way to trigger the correct custom styles for a grid row straight after a store fetch function has been called?

Apologies if my question is abit long winded - just thought I'd try and explain the issue fully :)

Answer 1

you do not need to loop over the rows ! You can use the "formatter" & the "styles" attribute when defining the layout "galayout"... Take a look at that:

function getExtImg(valueOfColumn) { // Do something with the value...
  return valueOfColumn+'do something with it';
}

var layout = [[ {'name': 'Ext', 'field': 'extension', formatter: getExtImg, styles:'padding:0px;'},

{'name': 'Filename', 'field': 'documentName', width: 'auto'}]];

// Add this layout to your grid...

What you specify as the formatter function ist called for every row ! Also the style you specify under the styles attribute.

I think this will help you out with your problem !

To be able to change the row style within the formatter, setup a formatter function like this:

formatter:function(val, rowIdx, cell) { classes = compute_classes(val, rowIdx, cell); cell.customClasses.push(classes); }

Source: How do you conditionally style a cell in a Dojo data grid?

As see should easily see, you can add classes to the current row using the push function !

Lucian