JQGrid, change row background color based on condi

Question

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

  $("#shippingscheduletable").jqGrid({
            url: $("#shippingscheduleurl").attr('href'),
            datatype: 'json',
            mtype: 'GET',
            altRows: true,
            colNames: ['Dealer', 'Model', 'Invoice', 'Date', 'PO', 'Serial', 'Status', 'City', 'State', 'IsPaid', 'Promo', 'Carrier', 'Int Notes', 'Ord Notes', 'Terms'],
            colModel: [
     { name: 'Company', index: 'id', width: 125, align: 'left' },
     { name: 'Model', index: 'Model', width: 50, align: 'left' },
     { name: 'Invoice', index: 'Invoice', width: 50, align: 'left' },
     { name: 'Date', index: 'OrderDate', width: 60, align: 'left' },
     { name: 'Po', index: 'PONum', width: 75, align: 'left' },
     { name: 'Serial', index: 'Serial', width: 50, align: 'left' },
     { name: 'Status', index: 'OrderStatus', width: 70, align: 'left' },
     { name: 'City', index: 'City', width: 100, align: 'left' },
     { name: 'State', index: 'State', width: 30, align: 'left' },
     { name: 'IsPaid', index: 'IsPaid', width: 30, align: 'left' },
     { name: 'Promo', index: 'Promo', width: 50, align: 'left' },
     { name: 'Carrier', index: 'Carrier', width: 80, align: 'left' },
     { name: 'InternalNotes', index: 'InternalNotes', width: 110, align: 'left' },
     { name: 'OrderNotes', index: 'OrderNotes', width: 110, align: 'left' },
     { name: 'Terms', index: 'Terms', width: 60, align: 'left' }
     ],
            pager: jQuery("#shippingschedulepager"),
            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'Company',
            sortorder: "asc",
            viewrecords: true,
            height: '700px',
            multiselect: true
        });

I would like to change the row color for all rows that have a true value for the IsPaid Field. Is this possible? if so, how would I do this? I have been researching custom formatting, but I am unsure if this is the correct approach, as I cannot find anything about changing the color of the back ground.

Answer 1

Use JQGrid row event jqGridRowAttr for setting any formatting. For more detail see http://www.trirand.com/blog/?page_id=393/help/rowattr-triger-after-setrowdata Example steps to setting background are:

First set your custom CSS for conditional formatting inline or your CSS file. For example (Please see result in chrome browser)

.bg-danger {
  background-color: #f2dede;
}
.bg-danger td{ background-color : #ff0000ad; }

Add row event right after ColModel

rowattr: function (rd) {

                    if (rd.FileExists == 'no') // your condition here
                    {
                        return { "class": "bg-danger" };
                    }

                }

Answer 2

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

Answer 3

use formatter function :

like in this post

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