jqgrid custom formatter getting applied for summary also

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.

I'm not sure that I correctly understand your requirements. Do you use *data grouping* and want to prevent applying of custom formatter on grouping summary? By the way both formatter and unformatter seems be wrong. The name of unformatter callback is `unformat` instead of `unformatter`, the usage of `$(cellObject.html())` seems be wrong too. I don't know Guriddo specificas because I develop *alternative fork* of jqGrid: [free jqGrid](https://github.com/free-jqgrid/jqGrid). — Oleg, May 01 '16 at 16:30
The code of formatter is wrong too because `color` var stay undefined if val <= 40. If I correctly understand you then you should use `cellattr` instead of custom formatter. See [the answer](http://stackoverflow.com/a/12180842/315935). — Oleg, May 01 '16 at 16:30
You have understood my requirement correctly Oleg. I use data grouping and want to prevent applying custom formatter on grouping summary! — Ranjith V, May 01 '16 at 16:40

score 0 · Accepted Answer · answered May 01 '16 at 17:34

0

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

answered May 01 '16 at 17:34

Oleg

220,925
34
403
798

Formatting now works on individual cells. Also I don't get that html issue while Inline editing. Thanks Oleg! Do you have any idea on how to apply formatting to the grouping summary alone ? Like, if the grouping summary crosses (40* number of items) within it, i want it displayed in red. Any suggestions mate ? – Ranjith V May 01 '16 at 18:18
@RanjithVj: Everything is easy to implement in free jqGrid, but I don't now about Guriddo. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/grouping2-requirejs-src.htm) for example. It uses RequireJs additionally, but it's not important for you you can see the main code [here](http://www.ok-soft-gmbh.com/jqGrid/OK/my-app-src.js). See [the issue](https://github.com/free-jqgrid/jqGrid/issues/227) for more details. The demo uses `groupSummaryPos: ["header", "header"]` to place the summary in the grouping row, but the same work with the standard summary groping in the footer too. – Oleg May 01 '16 at 19:05
in the example you have set `summaryTpl` a constant value ( DarkRed). I want it to be dynamic. I want it red if a condition is satisfied. I need to know how `summaryTpl` can be changed from within `summaryType` property. Thanks for your time – Ranjith V May 02 '16 at 05:29
@RanjithVj: You are welcome! Look at the summary of `note` column. It uses `"{0}"` as the value of `summaryTpl` and fill the full content of the summary cell inside of `summaryType`. Is it what you need? – Oleg May 02 '16 at 05:43
No @Oleg. Content of my summary cell is fixed. I want the color of the summary to change based on summary cell content. – Ranjith V May 02 '16 at 10:09

jqgrid custom formatter getting applied for summary also

1 Answers1

Linked