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

javascript, jqgrid

Solution

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.

Problem

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?

Original source

Related problems