JQGrid: How to set a cell style based on content - jqgrid

Question

I want to set a cell's background color based on the contents of the cell.
My first question: is there a way to set a cell's background color from within the xml data?
If not, here is my grid definition:
$("#grid_sites").jqGrid({
url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val(),
datatype: "local",
height: 160,
width: 832,
shrinkToFit: true,
caption:"",
colNames :["Site","Name","PI","Location","Phone","Status"],
colModel :[
{name:"sitenumber", index:"sitenumber", width:50, align:"right"},
{name:"name", index:"name", width:120},
{name:"location", index:"location", width:100},
{name:"phone", index:"phone", width:100},
{name:"status", index:"status", width:70}
],
pager:"pager_sites",
scroll: 1,
viewrecords:true,
sortable:true,
sortname: "sitenumber",
autowidth: true,
pgbuttons: false,
loadonce: true,
gridview: true
});
I want to change the background color of the status cell based on its contents.
I know I should probably use a formatter on the status column, but I'm not sure of the code to change just the background color for that cell.
{name:"status", index:"status", width:70, formatter: statusFormatter}
function statusFormatter(cellvalue, options, rowObject)
{
What exactly would go here for something like this:
if (cellValue == 'Pending') change the cell's background color to yellow
else if (cellValue == 'Approved') change the cells's background color to green;
}
Thanks!

Answer 1

There are exist many ways to do what you want. In the answer you would find an example how to use custom formatter to change the background color of the cell based on its contents. The answer is written before cellattr attribute are introduced. The main purpose of the custom formatter is to create the HTML contain of the cell based on the data of the cell.
The cellattr attribute introduced as modification of my feature request have advantage because it allows only set/modify attributes of the HTML code of the cell and use some predefined formatter like 'number' or 'select'. So you can just set class or style attribute and use at the same time some predefined formatter which corresponds the data contain. Look at this answer which shows how to set dynamically background-color over class and another answer which shows how to set it over style.
The answer discuss additionally advantages and disadvantages of the both approaches.
One more remark to your code. I don't recommend you to use url parameter in the form
url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val()
It has two important disadvantages. First, the $('#hdnStudyDetailId').val() could be send and decoded on the server in the wrong way if the contain of $('#hdnStudyDetailId').val() contain some special characters (' ', '+', '=', 'ä', 'д', '電', ...). The second problem is that the value from the '#hdnStudyDetailId' will be read only once at the time of the grid creation. So on any refreshing of the grid contain like sorting by another column, paging and so on the same old value from the '#hdnStudyDetailId' element will be used. I recommend you to read the answer and to use URL with respect of url and postData parameters:
url: "getgridxmlsites.php",
postData: {
detailid: function() { return $('#hdnStudyDetailId').val(); }
}