jquery - 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:

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.