Set class or identifier on jqGrid row based on a key/value pair placed in row (like ID).

Question

I'm guessing afterInsertRow is the method to use, and I've already got extra data for each row (read/unread), with the key "readStatus".

What I do no want is to be transversing the DOM after grid has completed to add a css class to row based on some cell value.

Any suggestions?

Add-on:

If this is the cell data:

{"cell":["blah blah blah"],"id":"123456789","readstatus":"unread"}

How do I get to the 'readstatus' part?

Answer 1

The usage of the function afterInsertRow is not the best way especially if you use gridview:true jqGrid option which is almost always recommended. Look at the old answer which do mostly what you need. The schema of the code could be about following

var grid = $('#list'),
    gridNode = grid[0];

grid.jqGrid({
    //...
    loadComplete: function() {
        var ids = grid.jqGrid('getDataIDs');
        for (var i = 0, l = ids.length; i < l; i++) {
            var rowid = ids[i];
            // get data from some column 'readStatus'
            var status = grid.jqGrid('getCell',rowid,'readStatus');
            // or get data from some 
            //var rowData = grid.jqGrid('getRowData',rowid);

            // now you can set css on the row with some
            if (status === 'error') {
                $('#' + rowid, gridNode).addClass('myErrorClass');
            }
        }
    }
});

It looks like "transversing the DOM after grid has completed", but it works quickly as the usage of afterInsertRow.