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?

Russellrusset

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.

Maggot

So the bottom line is that the data still need to be in the 'cell-level' rather than 'row-level'? Because I wanted to remove the column for read status altogether... but I can slot that info in some other column I guess... not ideal. – Russellrusset

@Brandon: Then look at #3025805 – Maggot

@Brandon: under removing of the column you mean make it hidden? – Maggot

no... i mean remove it altogether... hidden will still require some hacks (colspan ++) to work in all browsers. – Russellrusset

@Brandon: then you should clear the place where you want to get the information. Unter hidden I mean hidden:true in the colModel (see trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options). – Maggot

Added example of cell structure in question.. maybe that will help. – Russellrusset

@Maggot yes, I know what you mean by hidden. I already have 2 hidden columns based on data logic, I will still need to use Javascript to adjust the colspan of other columns to make sure it table expands to 100% to compensate the hidden columns. (Not sure which browser, but probably 1 of the IEs not working perfectly for hidden TDs) – Russellrusset

I'm trying to steer away from hiding columns altogether. – Russellrusset

@Brandon: Then you should declare the loadComplete as loadComplete: function(data). As the data parameter you will have the data exactly in the form how you as received from the server. You should enumerate the data: var myRows=data.rows; for (var i=0, l=myRows.length; i<l; i++) { var myrowData = data[i]; // now myrowData has not only myrowData.id and myrowData.cells, but also myrowData.readstatus .... After the exit from the loadComplete you will no more have access to the original data received from the server. – Maggot

I'll try that, as well as try inserted that data as an attribute in another column and use afterInsertRow, and see which is faster. – Russellrusset

@Brandon: another possible solution is the usage of the userdata see trirand.com/jqgridwiki/… and #3849315 – Maggot

@Brandon: You welcome! Don't forget to write me the results of your experiments. – Maggot

probably not userdata... as I'm dealing with record(row) level data, rather than general grid(user) data – Russellrusset

@Brandon: Because the value of the userdata is absolutely free you can insert as userdata for example array of ids which should be marked (has status unreaded) or some other information which is most easy for you to examine on the client side. In another old answer #3565398 I used userdata to mark some items as selected for example. So you are absolutely free in the usage of userdata. The small advantage of this is that the data will be saved in the grid. – Maggot

Answer 2

This can also be used to add CSS Class to row

var _tr = $("#gridId").jqGrid("getInd", rowid, true);
$(_tr).addClass("ui-state-error");

Hopes that Helps

Ullyot