JQGrid: How to set a cell style based on content

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!

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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(); }
}

Thanks so much for your response. I will probably use the loadComplete event and loop through all rows to set the cell attributes. — David Davis, Oct 14 '11 at 16:33
@David Davis: The way with loop inside of `loadComplete` through all rows is always slowly as the usage of `cellattr` or custom formater together with `gridview: true` parameter which you already use. If you do decide to use the loop because of any additional reasons, look at [the answer](http://stackoverflow.com/questions/5664587/jqgrid-load-large-data-set-without-pagination/5690583#5690583) which describes relatively effective way to implement this. — Oleg, Oct 14 '11 at 16:38
Thanks again. I read your post thoroughly again on using cellattr and tried that and like it much better. Now I know the proper way to format individual cells based on content. Thanks again so much for your help. — David Davis, Oct 14 '11 at 16:51

JQGrid: How to set a cell style based on content

1 Answers1