In JQGrid, Is it possible to use different formatter on grouping summary cell other than column formatter?

Question

is it possible to use different formatter for the data rows and the summary row? forexample, I want to add a summary info (summaryType= count) to a checkbox formatted column, summary value is shown as a checked checkbox. any ideas?

kinds, Alper

you can see screenshot from here:

Malinger

Answer 1

I found your question very interesting, because I didn't known the answer immediately. Now I found time to reread the source code of the grouping module of jqGrid and create an example which you need.

First of all I prepared the demo which display the following results:

How you can see the summary row has many elements which are formatted in the different way:

To have summary line at the end of every grouping block we need to define groupSummary: [true] property in the groupingView parameter of jqGrid. Then we need to define summaryType property for all columns in the colModel where the summary row have not empty cell.

For example, in the simplest case I defined for the column 'amount' the property summaryType: 'sum'.

For the column 'tax' I defined summaryTpl additionally:

summaryTpl: '<i>{0}</i>', summaryType: 'sum'

As the result the summary for the 'tax' column contains italic text.

For the 'total' column I used different colors depend on the displayed value. The results having the value grater as 1000 are displayed in green. Other values are displayed in red color. The implementation is real custom formatter for the summary row:

//formatter: 'number',
formatter: function (cellval, opts, rwdat, act) {
    if (opts.rowId === "") {
        if (cellval > 1000) {
            return '<span style="color:green">' +
                $.fn.fmatter('number', cellval, opts, rwdat, act) +
                '</span>';
        } else {
            return '<span style="color:red">' +
                $.fn.fmatter('number', cellval, opts, rwdat, act) +
                '</span>';
        }
    } else {
        return $.fn.fmatter('number', cellval, opts, rwdat, act);
    }
},
summaryType: 'sum'

Instead of formatter: 'number' I used custom formatter. I didn't want to implement the formatter: 'number' one more time, so I called the predefined 'number' formatter with respect of $.fn.fmatter('number', cellval, opts, rwdat, act).

The most important part of the above code is the line

if (opts.rowId === "") {

During formatting the grid cells the custom formatter will be called with the opts.rowId initialized as the row id. Only in case of formatting the summary row the opts.rowId will be the empty string (""). I use the fact to implement custom formatting.

In the column 'closed' I show one more trick. I use the summaryType defined as a function. One can use this to make some custom summary calculation another as the standard types: "sum", "min", "max", "count" and "avg". In the demo I display "count" of all and "count" of selected checkboxes and display the results in the summary. Moreover the summary cell has additionally checkbox which is checked if at least one checkbox in the group is checked. The corresponding code inclusive the custom formatter is the following:

formatter: function (cellval, opts, rwdat, act) {
    if (opts.rowId === "") {
        return '<span style="display:inline-block;top:-2px;position:relative;">' +
            cellval.checkedCount + ' of ' + cellval.totalCount + '</span>&nbsp;' +
            $.fn.fmatter('checkbox', cellval.max, opts, rwdat, act);
    } else {
        return $.fn.fmatter('checkbox', cellval, opts, rwdat, act);
    }
},
summaryType: function (val, name, record) {
    if (typeof (val) === "string") {
        val = {max: false, totalCount: 0, checkedCount: 0};
    }
    val.totalCount += 1;
    if (record[name]) {
        val.checkedCount += 1;
        val.max = true;
    }
    return val;
}

We needs to hold tree different values which we calculate: totalCount, checkedCount and max. The code above shows that one can change the initial string val parameter to the object which hold all information which we need. During formatting the summary row the custom formatter will be called with the cellval initialized to the val object which we created before. In the way we can save any custom information and then display it.

I hope with respect of the demo you will be able create any summary grouping row which you need.

Unsettle

Thanks Oleg, two critical information (wrapping of existing formatter func. and rowid being empty for summary rows) will guide me to a generic solution. – Malinger

Answer 2

are you using a custom formatter? what you can do is make a custom formatter to display different things based on the input. I'm not sure if you are returning true or false as your input but something liek this should work:

function checkboxFormatter(cellvalue,options,rowObject){
     if(typeof cellvalue == "number"){
          return cellvalue;
     }
     else if(cellvalue == "true"){
          return '<input type="checkbox" checked="checked" />';
     }
     else{
          return '<input type="checkbox" />';
     }
}

let me know if you have questions or if this is different then what you are thinking

Stomatic

I am using built in checkbox formatter, but I have also custom formatters, there I can use your solution or check if rendered <tr> has "jqfoot" class or not? If this so, I need to override all the builtin formatters which seems ugly to me :( – Malinger

why would you need to override all the builtin formatters? why not just this one? – Stomatic

Because, one can use any column for summary display purpose which have any kind of formatter. I need a generic solution. – Malinger

can you post a screenshot of this grid? i'm not following – Stomatic

I added the link to the screenshot. – Malinger