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

Question

Hi all,

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

So 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, thats not the problem.

I've tried multple 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 gratly 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;
}

Thanks, Thomas

Answer 1

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 2

It seems to me that your main problem is 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.raddClass('state_active');