jqgrid custom formatter getting applied for summary also - jqgrid

Question

I'm using jqGrid v5.0.2 to implement custom formatter. I'm having summaries enabled in the columns. I want to display the text in Red, if the column value is greater than 40. I have implemented Oleg's solution to my problem. The formatting works, but it is getting applied to the summary row also. For Example :
Resource Week1
-------- -----
Mr.X 45
-Task1 25
-Task2 20
1) In the above example I only want the cells with values 20 and 25 to be red (If they are individually above 40), but the grouped cell 45 also is displayed in red.I want the grouped cell to be red only if it is above 80(40+40). Any suggestions on how to achieve my desired result ?
My Code :
{
name: "FirstWeek",
editable: true,
sortable: false,
formatter: function (cellvalue) {
var color;
var val = Number(cellvalue);
if (val > 40) {
color = 'red';
}
var cellHtml = "<span style='color:" + color + "' originalValue='" +
val + "'>" + val + "</span>";
return cellHtml;
},
unformatter: function(cellValue, options, cellObject) {
return $(cellObject.html()).attr("originalValue");
},
summaryTpl: "<b>{0}</b>",
summaryType: "sum",
editrules: { number: true, minValue: 0, maxValue: 40 }
}
2)While inline editing the custom formatted cell, I'm getting <span class="cellWithoutBackground" style="color:undefined;">25</span> in the cell(UI) . I have used the unformatter function also.That doesn't seem to work. Help appreciated.

Answer 1

I recommend you to remove formatter and unformatter callbacks and to use cellattr callback instead in the column. It could be defined like:
cellattr: function(rowId, val, rawObject) {
if (Number(val) > 40) {
return " style='color: red'";
}
}
or something like
cellattr: function(rowId, val, rawObject) {
if (Number(val) > 40) {
return " class='my-text-color'";
}
}
where you set class my-text-color on specific cells (<td> elements) of the column. If you use class attribute then you should define additional CSS rule like
.my-text-color {
color: red;
}