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]change);
.....

'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'
        } ];

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]change);
.....

'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'
        } ];

• javascript
• css
• dojo
• dojox.grid
• dojox.grid.datagrid

Share Improve this question Follow edited Aug 28, 2011 at 15:58 nath asked Aug 28, 2011 at 12:46 nathnath 2,8481212 gold badges4949 silver badges7575 bronze badges 3

• The answer will be in your DataGrid configuration. You should post that. – Hemlock Commented Aug 28, 2011 at 13:39
• Your layout4 is wrong by the way. Unless geticon() returns a function, then you aren't passing a handler, you are calling the function directly from within the formatter. Remove the () from geticon and it should be okay. – Layke Commented Aug 28, 2011 at 16:21
• I have tried answering it here stackoverflow./questions/16076701/… – nishanttiwari05 Commented Jun 23, 2013 at 3:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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( itemchange < 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>";
}