How to change cell formatting dynamically

Question

I hava implemented a datagrid using dojo which get updated every 5 seconds. I use following code to update the datagrid.

jsonStore.fetch({
         query: {id:'*'},
         onComplete: function(items, result){
         dojo.forEach(items, function(item){
             jsonStore.setValue(item, "time" , data.update[0].netchange);
.....

'data' is the new data i need to set to the grid which is an json object as follows

var data = {"update":[{...}]}

what I need to do if the netchage is negative i need set cell color to red. if netchange is positive it should be green. So I need a way to change cell formatting dynamically. can some one please tell me how to this. thanks in advance

grid4 = new dojox.grid.DataGrid({
            query : {
                Title : '*'
            },
            id : "grid",
            jsId : "grid",
            clientSort : true,
            rowSelector : '0px',
            structure : layout4
        }, document.createElement('div'));
        grid4.setStore(jsonStore);
        dojo.byId("gridContainer4").appendChild(grid4.domNode);

var layout4 = [ {
            field : 'time',
            name : 'time',
            width : '40px',
            formatter: geticon()
        }, {
            field : 'netchange',
            name : 'netchange',
            width : '30px'
        } ];

Answer 1

Before I answer the question, just a trivial misnomer when you say, "change the cell formatting dynamically".

You aren't changing the cell formatter, you are changing how the cell is styled.

Every time a value is loaded into a cell, the formatter is called. Additionally, the onStyleROw function is called for the row that the cell is within.

This means that you have two options for changing the color of the cell. You can do it on a cell wide basis, or you can have your formatter do something simple like wrapping the value with a <span> that has a different style color. I'll show you both.

Here is the first solution without changing any of your existing grid code and it will change the entire row using onStyleRow.

Solution 1 using onStyleRow

Step 1. (Connect the onStyleRow)

dojo.connect( grid4, "onStyleRow", styleRowGridPayment );

Step 2. (Create you styleRowGridPayment method.)

var styleGridPayment = function(inRow) {
        if( null !== grid4.getItem( inRow.index ) ) {
            item = grid4.getItem( inRow.index );
            if( item.netchange < 0 ) {
                inRow.customStyles += "color:red;";
            } else {
                inRow.customStyles += "color:green;";
            }
         }
    }   

That should do it for using onStyleRow.

Solution 2, using the formatter

In your field declaration, you would have

{
    field : 'netchange',
    name : 'netchange',
    width : '30px'
    formatter: formatNetchange
} 

Notice that I have added the formatNetchange as the formatter.

Then you just create your formatter.

formatNetchange = function(value){
     if(value < 0){
        color = "red";
     } else {
        color = "green";
     }
     return "<span style='color:" + color "'>" + value "</span>";
}