JQGrid Grouping GroupText formatting and modification

Question

I have a grid that implements grouping but would like to expand on the details that display in the groupText: area. Ideally I would be able to take data about that grouping and display in that group row with the group name ({0} default value).

In other words what I am trying to achieve is a way to display not only the group name but also some other data items contained in the JSON feed to the grid.

My searching seems to be coming up short on anyone being able to achieve this but I'm hoping someone can shed some light on expanding this setting and providing access to formating this area.

Answer 1

I find your question interesting, but the implementation is not simple. In the answer I showed before how one could use custom formatter in summary rows of the grouping.

In the demo you can see how to implement custom formatting of the grouping text. The demo display the following:

The implementation consist just from the implementation of the custom formatter which can be used for both purpose: formatting of the content of the corresponding column and formatting of the grouping text in case of grouping by the column. The code is a little tricky, but I hope that all will be able follow it. The code use the differences of the input parameters to define whether the formatter will be called to format the column content or to format the grouping text.

One part of the code which get the texts like "(test4,test7)" is not so effective in case of the usage of large number of rows, but it works.

Below is the code of formatter of the "Date" column which would by typically used with the predefined formatter: 'date'. I called in the part of the code the original Date-formatter, but used for the the grouping text more sophisticated code:

formatter: function (cellval, opts, rowObject, action) {
    var fullOpts = $.extend({}, $.jgrid.formatter.date, opts),
        formattedDate = $.fmatter.util.DateFormat('Y-m-d', cellval, 'd-M-Y', fullOpts),
        groupIdPrefix = opts.gid + "ghead_",
        groupIdPrefixLength = groupIdPrefix.length,
        month = Number(cellval.split('-')[1]), // input format 'Y-m-d'
        names = [], data, i, l, item;

    // test wether opts.rowId start with opts.gid + "ghead_" and integer
    // and rowObject is the array and action is undefined.

    if (opts.rowId.substr(0, groupIdPrefixLength) === groupIdPrefix && typeof action === "undefined") {
        // custom formating of the group header
        // we just simulate some login by testing of the month > 9

        // the next code fragment is not effective, but it can be used
        // in case of not so large number of groups and the local data
        data = $(this).jqGrid("getGridParam", "data");
        for (i = 0, l = data.length; i < l; i++) {
            item = data[i];
            if (item.invdate === cellval) {
                names.push(item.name);
            }
        }

        return (month > 9 ? ('<span class="ui-icon ui-icon-alert" style="float: left;"></span>' +
            '<span style="color:tomato; margin-left: 5px;">') : "<span>") +
            formattedDate + ' (' + names.join() + ')</span>'
    }
    return formattedDate;
}

UPDATED: The fixed version of the demo is here. It uses $.fn.fmatter instead of currently removed from jqGrid method $.fmatter.util.DateFormat.