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!
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 setclass
orstyle
attribute and use at the same time some predefined formatter which corresponds the data contain. Look at this answer which shows how to set dynamicallybackground-color
overclass
and another answer which shows how to set it overstyle
.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 formIt 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 ofurl
andpostData
parameters: