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 formatter for this. The formatter itself works, that's not the problem.

I've tried multiple ways I've found so far on the web - adding a class, directly adding CSS code, using setRowData, using setCell....

Here are my examples - none of them worked for me (Linux, ff363) - any pointer would be greatly appreciated.

27.05.2010_00:00:00-27.05.2010_00:00:00 is my row id

<style>
.state_inactive {
            background-color: red !important;
        }
.state_active {
    background-color: green !important;
}
</style>

function format_state (cellvalue, options, rowObject)
{
    var elem='#'+options.gid;
    if (cellvalue != 1) {

        jQuery('#list2').setRowData(options.rowID,'',
                                    {'background-color':'#FF6F6F'});

        jQuery('#list2').setRowData('27.05.2010_00:00:00-27.05.2010_00:00:00',
                                    '',{'background-color':'#FF6F6F'});

        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_inactive','');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'','state_inactive');

            jQuery(elem).setCell('"'+options.rowId+'"',cnt,'5',
                                 {'background-color':'#FF6F6F'},'');
        }
    } else {
        for (var cnt=0;cnt<rowObject.length;cnt=cnt+1) {
            jQuery(elem).setCell(options.rowId,cnt,'','state_active','');
        }
    }
    <!-- dont modify, we simply added the class above-->
    return cellvalue;
}

Answer 1

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

Answer 2

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 3

I was trying solution for a long time and finally from all examples and suggestions combine someting that worked for me. Of course you need to define custom css styles for this to work. Hope that this helps, although it could produce potential speed issue.

...

loadComplete: function() {

      var rowIDs = jQuery("#grid").getDataIDs(); 
      for (var i=0;i<rowIDs.length;i=i+1){ 
        rowData=jQuery("#grid").getRowData(rowIDs[i]);
        var trElement = jQuery("#"+ rowIDs[i],jQuery('#grid'));
        if (rowData.statusID > 5) { 
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorRED');
        }else{ 
          if (rowData.statusID == 1){
            trElement.removeClass('ui-widget-content');
            trElement.addClass('rowColorGREEN');
          }
        }
      }
  },

...

Answer 4

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 5

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

Very Simple and works

Answer 6

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 7

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 8

May be it's too late for this answer but you can use rowattr to change row color like so :

rowattr : function(rd) {
            if(Difference_In_Days>=0&&rd.active==true){
                return {"class" : "online"};
            }else if(rd.active==false){
                return {"class" : "notActive"};
            }
            
        }