changing row background in Dojo Datagrid from dynamic data

Question

The topic of changing the Dojo DataGrid row background has been previously discussed on this board as well as the Dojo documentation, which gives a full example ( http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html ).

My issue is a little bit different. I need to change the background color of the rows based on a common field - let's call it 'CityId'. If two rows have the same CityId, then they should have the same background. Note that this question is not concerned with the grouping nor ordering of the data in the grid, but only with the changing of the row style for adjacent rows sharing a common ID field.

The two main paths for this issue involve either hooking into the 'onStyleRow' event or the private '_onFetchComplete' event.

Here's my onStyleRow attempt:

var idx = 0;
var prevId = 0;
function myStyleRow(row) {
    var item = grid.getItem(row.index);
    if(item) {
        var currId = store.getValue(item, "CityId", null);
        if ( !!currId ) {

            if ( prevId != currId ) {
                prevId = currId;
                idx++;
            }

            if ( idx%2 == 0 ) {
                row.customStyles += 'background-color:#FFF000;';
            } else {
                //row.customStyles += 'background-color:#000;';
            }
        }
    }
    grid.focus.styleRow(row);
    grid.edit.styleRow(row);
}

which gets called during the grid creation among other parameters

grid = new dojox.grid.DataGrid({onStyleRow:myStyleRow});

The reason why this approach is unstable is because the onStyleRow event gets triggered on mouse hover, causing the rows to be re-painted due to the prevId value. I would like to know whether/how I could disable onStyleRow from triggering on mouse hovers. This would solve my issue.

In the _onFetchComplete approach, I am stuck trying to find a way to access grid rows. Here's my code:

var idx = 0;
var prevId = 0;
grid.connect(grid, '_onFetchComplete', function() {
    // wait until everything is loaded
    for (var i in grid._pending_requests) {
        if (grid._pending_requests[i]) {
           return;
        }
    }


    // parse through row data
    for ( var j=0; j < grid.rowCount; j++) {
        var item = grid.getItem(j);
        if(item) {
            var currId = store.getValue(item, "CityId", null);
            if ( !!currId ) {

                if ( prevId != currId ) {
                    prevId = currId;
                    idx++;
                }

                if ( idx%2 == 0 ) {
                    row.customStyles += 'background-color:#FFF000;';
                } else {
                    //row.customStyles += 'background-color:#000;';
                }
            }
        }
    }
});

This is obviously a work in progress as there are two missing points: a way to iterate through the grid's rows (grid.rowCount does not work properly) and a way to fetch the grid's rows in order to apply the custom styles. I could not find something like grid.getRow() to address the issue.

Any pointers are appreciated.

Answer 1

Here's the final code:

var idx = 0;
var prevId = 0;
var passing = {};
var color = {};
dojo.connect(grid, 'onStyleRow', this, function (row) {
    var item = grid.getItem(row.index);
    if(item) {
        var currId = store.getValue(item, "CityId", null);
        if ( !passing[currId] ) {
            passing[currId] = true;

            if ( prevId != currId ) {                       
                prevId = currId;
                idx++;
            }

            if ( idx%2 == 0 ) {
                row.customStyles += 'background-color:#FFF000;';
                color[currId] = 'background-color:#FFF000;';
            } else {
                row.customStyles += 'background-color:#F2F7F7;';
                color[currId] = 'background-color:#F2F7F7;';
            }
        } else {
            row.customStyles += color[currId];
        }
    }
});

The 'passing' object is used to mark the first pass through the rows - this point is important because the 'prevId' value is updated correctly. The code works well with multiple calls to get more data into the grid because 'prevId' maintains its integrity. The 'color' object holds the values recorded for row backgrounds. This is needed because the onStyleRow event is called on mouseover, which implies the need to re-paint every time. I hope this helps someone else as well.