jqGrid: change background color of row based on row cell value by column name

Question

jqGrid has column named Posted. It can be positioned in different positions depending how grid is configured by customer but is always prssent.

I need to change background color of rows if Posted column has value True

I tried colmodel below but alert(rdata.Posted) displays always undefined.

How to change backgound color of row if Posted column in this row has value true ?

I looked into lot of Oleg and other solutions for changing background color but they are using hard coded column number.

colModel: [

{"cellattr":function(rowId, tv, rawObject, cm, rdata) {  
if (rdata.Posted)
    return 'class="jqgrid-readonlycolumn"';
    return '';
      }
  ,"label":"Klient","name":"Klient_nimi","classes":null,"hidden":false},


{"label":null,"name":"Posted","editable":true,"width":0,
"classes":null,"hidden":true}],
...

Update

In update2 Oleg recommends to use rowattr. I need to hide inlined delete button and custom post button in actions column also. I'm usijng code below in loadComplete. How to implement this using rowattr ?

var LoadCompleteHandler = function () {
    var iCol = getColumnIndexByName($grid, 'Kinnitatud'),
      postedDateCol = getColumnIndexByName($grid, 'Kinkuup'),
      cRows = $grid[0].rows.length,
      iRow,
      row,
      className,
      isPosted,
      mycell,
      mycelldata,
      i, count,
      cm = $grid.jqGrid('getGridParam', 'colModel'),
      l,
      iActionsCol = getColumnIndexByName($grid, '_actions');
    l = cm.length;
    if (iCol > 0 || postedDateCol > 0) {
        for (iRow = 0; iRow < cRows; iRow = iRow + 1) {
            row = $grid[0].rows[iRow];
            className = row.className;
            isPosted = false;
            if ($.inArray('jqgrow', className.split(' ')) > 0) { // $(row).hasClass('jqgrow')
                if (iCol > 0) {
                    isPosted = $(row.cells[iCol]).find(">div>input:checked").length > 0;
                }
                if (postedDateCol > 0) {
                    mycell = row.cells[postedDateCol];
                    mycelldata = mycell.textContent || mycell.innerText;
                    isPosted = mycelldata.replace(/^\s+/g, "").replace(/\s+$/g, "") !== "";
                }

                if (isPosted) {
                    if ($.inArray('jqgrid-postedrow', className.split(' ')) === -1) {
                        row.className = className + ' jqgrid-postedrow';
                        $(row.cells[iActionsCol]).find(">div>div.ui-inline-del").hide();
                        $(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide();
                    }
                }
            }
        }
    }

Oleg Oleg · Accepted Answer · 2011-07-04T20:03:24

The main ideas to change the background color of the row you will find here and here. I recommend you to read this answer which discussed different advantages and disadvantages of different approaches.

To get column index from the column name you can use following simple function:

var getColumnIndexByName = function(grid, columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
        for (; i<l; i++) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

The function getColumnIndexByName($("#list"), 'MyColumnName') will get you the index in colModel of the 'MyColumnName' column.

To change the background color you can follow the example

loadComplete: function() {
    $("tr.jqgrow:odd").addClass('myAltRowClass');
}

from the answer, but instead of ':odd' filter you can write the filter yourself using jQuery.filter. Inside of the filter you can use :nth-child() to access the data from the corresponding <td> element (see here)

UPDATED: You can do the following (very close to the code from the another answer):

loadComplete: function() {
    var iCol = getColumnIndexByName($(this),'closed'),
        cRows = this.rows.length, iRow, row, className;

    for (iRow=0; iRow<cRows; iRow++) {
        row = this.rows[iRow];
        className = row.className;
        if ($.inArray('jqgrow', className.split(' ')) > 0) {
            var x = $(row.cells[iCol]).children("input:checked");
            if (x.length>0) {
                if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
                    row.className = className + ' myAltRowClass';
                }
            }
        }
    }
}

The corresponding demo is here. You will see the following:

enter image description here

By the way if the 'Closed' column will be hidden everything will continue to work as before.

UPDATED 2: The answer describe how to use rowattr callback to simplify the solution and to have the best performance (in case of gridview: true).

jqGrid: change background color of row based on row cell value by column name

2 Answers