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

Question

I know it\'s been asked before, but I cant get it to run and I\'m out of things to try.

I want to colorize a row in a Grid if its value is not 1 - I use a custom for

Answer 1

Assumed other cell value is Y/N.

below code goes in loadComplete event

 var rowIDs = jQuery("#GRID").getDataIDs();   //Get all grid row IDs 
 for (var i = 0; i < rowIDs.length; i++) {     //enumerate rows in the grid
     var rowData = $("#GRID").jqGrid('getRowData', rowIDs[i]);   
     //If condition is met (update condition as req)
     if (rowData["COLNAME_CHECKED"] == "N") {          

         //set cell color if other cell value is matching condition
         $("#GRID").jqGrid('setCell', rowIDs[i], "COLNAMEModified", "", { color: 'red' });
         //for row color, update style. The code is given above by **Ricardo Vieira**
     }
 }

Answer 2

I suggest that you try someing like this. This will actualy give you access to the whole row.

afterInsertRow: function(rowid, aData, rowelem) 
     {  
        if (aData.field =='value'){    
            jQuery("#list1").setCell(rowid,'message','',{color:'red'});   
        }   
     } 

Answer 3

I've tried solutions above, but I think that one is the correct:

afterInsertRow : function(rowid, rowdata)
{
    if (parseFloat(rowdata.amount) > 500)
    {
        $(this).jqGrid('setRowData', rowid, false, {color:'red'});
    }
}

If css class is between apostrophes, then it is overwritten by to the original one (you can see that easily using firebug):

<tr class="ui-widget-content jqgrow ui-row-ltr RedStyle" ...>  

correct with {color:'red'}:

<tr class="ui-widget-content jqgrow ui-row-ltr" style="background: none repeat scroll 0pt 0pt red;" ...>

According to documentation of setRowData:

If the cssprop parameter is string we use addClass to add classes to the row. If the parameter is object we use css to add css properties.

Answer 4

 afterInsertRow: function (rowid, rowdata) {                                                     
    $(grid).jqGrid('setRowData', rowid, false, { background: 'red' });
}

Very Simple and works

Answer 5

for anyone that looking for a real answer at this topic..

this works !

afterInsertRow : function(rowid, rowdata)
{
    if (rowdata.colmodelnamefield == "something")
    {
        $(this).jqGrid('setRowData', rowid, false, 'StyleCss');
    }

}

In another file stylesheet the custom CSS

.StyleCss{ background-color:red !important; }

dont forget the !important to overwrites the theme ui roller

Answer 6

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');