javascript - 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

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

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

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

UPDATED: The answer is relatively old. More recent versions of jqGrid have callattr and rowattr callbacks which can be used to implement the same requirements more effectively. It's important to understand that setting of class on one cell of grid or of the row of grid (see .addClass('myErrorClass') in the code of the answer) follows browser reflow on all elements existing on the page. So one should reduce the number of changing of DOM elements on the page. To do so it's strict recommended to use gridview: true (see the answer for more details). The callbacks callattr, rowattr and custom formatters used together with gridview: true allows to create the full content of grid body at once. So the number of changes on the page will be reduced and the performance will be improved.

The column property callattr from colModel can be helpful to set class, style or some other attributes on selected cells of grid. The callback rowattr can help to set class, style or some other attributes on selected rows of grid (exactly like do the above example).

I recommend everybody who read the above answer look at the answer which shows how to use rowattr.

You can read more about callattr for example in the following answers: this, this, this, this. If you use datatype: "xml" the implementation could be a little more complex: see the answer for details.