Jqgrid using cellattr to toggle a class on seperate cell - jqgrid

Question

in my col model i have two cells 'Status' and 'HiddenStatus'. The reason for this is 'Status' is translatable so this way is better rather than checking the value for each language. As you can see below i am attempting to set the class of the 'Status' cell based on the value of the 'HiddenStatus' cell. However this is not working as i hoped since the class is not being set correctly.
I believe the issue i am having is, 'getCell' is used to return the value rather than an object. How can i get the cell as an object so i can then manage what class i add or remove.
{name: 'Status', width: 70, index: 'Status'},
{name: 'HiddenStatus', width: 70, hidden: true, cellattr : function(rowId, cellValue, rawObject, cm, rdata){
var statusCell = $(this).jqGrid('getCell',rowId,'Status');
if(cellValue != "Assigned"){
$(statusCell).removeClass('status-assigned');
return '';
}
if(cellValue == "Assigned"){
$(statusCell).addClass('status-assigned');
return '';
}
}},

Answer 1

First of all, it's important to understand what cellattr do. Any changes on the existing page are expensive. Thus jqGrid try to build the whole HTML fragment with the table body as one long string. Every column will be used to build the cells (<td> elements) of the corresponding columns of the grid. The callback cellattr will be called during building the cell and can be used to set attributes on the cell. The cellattr callback have to return the string. If it returns, for example, " class='status-assigned'" then the <td> will have the class (<td class='status-assigned'>...</td>).
The callback cellattr will be called before the grid will be created. Thus one can't access to the grid using $(this).jqGrid('getCell',rowId,'Status'), for example.
If you need to set class status-assigned conditionally on the cells of the column Status then you should define cellattr callback in the column Status. Inside the callback you can use rawObject.HiddenStatus or rdata.HiddenStatus. One don't need typically to create hidden columns like HiddenStatus. Instead of that, it's enough to use include all properties of input data, which one need, in additionalProperties option of jqGrid. For example, additionalProperties: ["HiddenStatus"].
Your original code could be modified to the following:
{
name: 'Status', width: 70,
cellattr: function (rowId, cellValue, item) {
if (item.HiddenStatus === "Assigned") {
return " class='status-assigned'";
}
}
}
See the old answer for an example of usage cellattr.