jqGrid custom format fails on addClass

Question

I populate a new grid from json with custom formatter the formatter is defined :

testFormatter(value,el,opts)
{
     if (value==0)
     {
          $(el).addClass("Fail");
     }
     …
}

I am expecting the cells to use the css class but If I check the cells they don't add that class.

Answer 1

You made the typical error of the usage of the custom formatter. It is important to understand that the jqGrid has the best performance if the grid contain will be created as the string. In the case the gridview:true gives you the performance. Any custom formatter should work in the gridview:true mode, so the custom formater has no parameter which are DOM element and so you can not use operations like $(el).addClass("Fail");

In some old answers (see here and here) you can find how the problem can be solved, but I would you suggest to use new feature of jqGrid 4.0.0: cellattr option. For undefrstanding: the purpose of the custom formatter is not add some HTML attributes like class for example. It should be used for example to convert some universal date format like yyyy-mm-dd to localized form like dd.mm.yyyy (German style). If you don't want to change format of the column, but want only add some attributes like title (used for tooltips), class (like in your case), style and so on the new cellattr option is what you need.

In you case you can define

cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
    if (cellValue==0) {
        return ' class="Fail"';
    }
}

See a small demo here:

In the demo I added calsses ui-state-error and ui-state-error-text to all cells of 'Client' column where in the 'Closed' the checkbox is set.