Jqgrid: Change Background Color of Row Based on Row Cell Value by Column Name

How to change Row color in JQGrid based on value in Column

The color of the row (background color or the color of the text) can be defined by assigning additional style or class attribute on the selected <tr> elements (rows). jqGrid has rowattr which allows to do this during filling of the body of the grid. So the usage of rowattr will get you the best performance. You should use gridview: true to see the performance improvement.

The answer provide the solution of your problem.

Alternative way described here is slowly and should be used only on the old versions of jqGrid which don't have rowattr feature implemented. To understand why the way with rowattr works more quickly I recommend you to read the answer.

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

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:

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 row background color based on condition

use formatter function :

like in this post

http://www.trirand.net/forum/default.aspx?g=posts&m=2678

Set background color of cell in a column based on a particular condition in jqgrid

You can use formatter for total column.

{
    name: "total",
    index: "total",
    formatter: function(cellvalue, options, rowObject){
        if(cellvalue>10)
            return '<span style="background-color: red; display: block; width: 100%; height: 100%; ">' + cellvalue + '</span>';
        else
            return cellvalue;
    }
}

DEMO

jqGrid Coloring an entire line in Grid based upon a cells value

It seems to me that your main problem is you're not setting a 'background-color' style. You should remove 'ui-widget-content' class from the row (from <tr> element)

jQuery("#"+ options.rowId,jQuery('#list2')).removeClass('ui-widget-content');

before adding the class state_activ or state_inactive, because jQuery UI class 'ui-widget-content' is define .ui-widget-content like

{
border: 1px solid #fad42e;
background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
color: #363636;
}

and only with setting of CSS 'background-color' your not really change the background color. So try to use something like

var trElement = jQuery("#"+ options.rowId,jQuery('#list2'));
trElement.removeClass('ui-widget-content');
trElement.addClass('state_active');

Column text color when row takes focus (is clicked)

This is little bit tricky.

You know that the inline style (the style of the table cell) has higher priority than the css. Moreover the highlight class is added to the row while the custom class is added to the child table cell.

This mean that to solve the problem we need to redefine the cell class within the highlight class.

In your application do :

td.mycolor {        
    background:rgb(250, 250, 250);
    color : rgb(100, 200, 300);         
}

Add this class to the cell using the setCell method

$("#grid").jqGrid("setCell", rowid, "colname", "", "mycolor" );

Below the definition of mycolor class do:

.ui-widget-content .ui-state-highlight > td.mycolor { 
    background-color: inherit !important;
    color : inherit !important;
}

in case of Bootstrap this maybe should be

.table-success > td.mycolor { 
    background-color: inherit !important;
    color : inherit !important;
}

(check the docs to be a sure which class is added when the row is selected)

This way the mycolor will inherit the colors of the parent class when we add the class to the row.

jqGrid, setting bg color on column cells when column header is clicked

You can use setCell method inside of loadComplete event handle. The event loadComplete will be called after the sorted data will be loaded and after the data paging so it is a good place to change the background color of cells based on the current sort order:

loadComplete: function() {
    var ids = grid.jqGrid('getDataIDs');
    if (ids) {
        var sortName = grid.jqGrid('getGridParam','sortname');
        var sortOrder = grid.jqGrid('getGridParam','sortorder');
        for (var i=0;i<ids.length;i++) {
            grid.jqGrid('setCell', ids[i], sortName, '', '',
                        {style:(sortOrder==='asc'?'background:aqua;':
                                                  'background:yellow;')});
        }
    }
}

A working example which do this you can see live here.

UPDATED: Look at the modified demo also. The results seems look more nice as in the previous demo:

It shows gradient effect in all browsers excepting opera. In opera it is the same as the previous demo. In another my answer I play more with the color gradient effects.

how to set the cell background color baced on the cell value in jqgrid?

You can do this in many ways: see this, this or this. Important is not only how you do this, but where. The loadComplete event handle is the good place for that.

UPDATED: In the next version of jqGrid you will able to use new cellattr option as function in the colModel. See this demo and my original suggestion.

---

Related Topics