JQGrid, change row background color based on condition

Question

I have the following jqgrid that uses the jquery ui theme imported to my master page.

  $(\"#shippingscheduletable\").jqGrid({
            url: $(\"#shipping         


        

Answer 1

I tried this and works to set the background color for the entire row. Works with paging also:

gridComplete: function()
{
    var rows = $("#"+mygrid).getDataIDs(); 
    for (var i = 0; i < rows.length; i++)
    {
        var status = $("#"+mygrid).getCell(rows[i],"status");
        if(status == "Completed")
        {
            $("#"+mygrid).jqGrid('setRowData',rows[i],false, {  color:'white',weightfont:'bold',background:'blue'});            
        }
    }
}

Answer 2

What about via Jquery Css.
See code below to set rows with Inactive status to red. Grid name is jqTable.

setGridColors: function() {
    $('td[title="Inactive"]', '#jqTable').each(function(i) {
        $(this).parent().css('background', 'red');
    });
}

Answer 3

This pointed me in the right direction but didnt quite work for me with paging. If it helps anyone, the following did work and doesn't use the colModel formatter.

I needed to apply a red colour to individual cells with outstanding amounts (name:os) in the 9th td on my grid. Datatype was json and I used the loadComplete function which has the data response as its parameter:

loadComplete: function(data) {
    $.each(data.rows,function(i,item){
        if(data.rows[i].os>0){
            $("#" + data.rows[i].id).find("td").eq(9).css("color", "red");
        }
    });
},

Got rid of the paging issues I had and works on sorting etc..

As an aside - I've found the loadComplete function useful for adding in dynamic information like changing the caption texts for search results - probably obvious to many but I'm new to json, jquery and jqgrid