4

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?

bcm
  • 5,470
  • 10
  • 59
  • 92

2 Answers2

13

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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. – bcm Oct 26 '10 at 21:40
  • @Brandon: Then look at http://stackoverflow.com/questions/3025305/jqgrid-firefox-and-css-text-decoration-problem/3026421#3026421 – Oleg Oct 26 '10 at 21:41
  • @Brandon: under removing of the column you mean make it hidden? – Oleg Oct 26 '10 at 21:44
  • no... i mean remove it altogether... hidden will still require some hacks (colspan ++) to work in all browsers. – bcm Oct 26 '10 at 21:46
  • @Brandon: then you should clear the place where you want to get the information. Unter hidden I mean `hidden:true` in the colModel (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options). – Oleg Oct 26 '10 at 21:47
  • Added example of cell structure in question.. maybe that will help. – bcm Oct 26 '10 at 21:51
  • @Oleg 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) – bcm Oct 26 '10 at 21:54
  • I'm trying to steer away from hiding columns altogether. – bcm Oct 26 '10 at 21:54
  • @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 – Oleg Oct 26 '10 at 21:58
  • 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. – bcm Oct 26 '10 at 22:02
  • @Brandon: another possible solution is the usage of the `userdata` see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#user_data and http://stackoverflow.com/questions/3848815/how-to-read-userdata-in-jqgrid/3849513#3849513 – Oleg Oct 26 '10 at 22:03
  • @Brandon: You welcome! Don't forget to write me the results of your experiments. – Oleg Oct 26 '10 at 22:04
  • probably not userdata... as I'm dealing with record(row) level data, rather than general grid(user) data – bcm Oct 26 '10 at 22:05
  • @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 http://stackoverflow.com/questions/3564898/jqgrid-programatically-select-grid-row/3571392#3571392 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. – Oleg Oct 26 '10 at 22:13
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

Imran
  • 2,906
  • 1
  • 19
  • 20