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.

Backboard

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.

Iselaisenberg

Thank you for replying.... my project wouldn't' be where it is at without all your answers on Stackoverflow. I"m working through this example and I'm loading data from the server in a JSON format... when I try and access the grid data to load it into the data = $(this).jqGrid("getGridParam", "data"); It is coming up empty... I can't seem to find anything on this but I have to assume that both this and jqGrid('getRowData') will come up empty at this point in the grid life cycle? – Backboard

@MarkR: I'm glad to read that my old answers helped you too. About you last question. If you use server based data without the usage loadonce: true and if you don't use TreeGrid then the local data parameter will be not filled. In the case you can't access the full server response. The getRowData could help you only if the grid is already filled and help not inside of custom formatter. As the workaround you can use beforeProcessing callback to save data returned from the server in a variable defined in the outer scope. Then you will be able to access the data as I described above. – Iselaisenberg

I don't think I can use loadonce: true because I want to use paging and such and my understanding is that then gets disabled...though I would defer to you of course if that wasn't the case... I"m going to work on accessing the data via the method you mentioned. Thanks again – Backboard

@MarkR: You are welcome! In case of pure server side data the most simple solution will be either to use beforeProcessing to "catch" the server response or you can prepare all the work which you need on the server side. You can make grouping on the server, construct the detailed strings which you will use later inside of grouping text and place the information somewhere in the server response. For example you can use userdata and get the information from userData parmeter of jqGrid. The approach will be optimization only of the same way. – Iselaisenberg

I tried the userdata method of passing in data for my grid and the custom formatter but it seemed like I would be duplicating data that I would be passing into my grid, so I just did as you suggested and populated a variable via beforeProcessing and made it accessable to my customformatter function then parsed out the JSON... I have my grouping displaying the extra data I wanted...hopefully they will add an enhancement in the future but for now working great! Thanks again! – Backboard

@MarkR: You are welcome! The way with userdata need be used only for performance reason in case of needs to display large number of rows. If you implement paging you will don't see any performance problems. – Iselaisenberg

@Iselaisenberg - Thank you for your hard work in making this possible. I'm gonna give this a shot as an answer to my last StackOverflow posted question. – Betimes

In jqgrid 4.5.2 the formattedDate = $.fmatter.util.DateFormat('Y-m-d', cellval, 'd-M-Y', fullOpts) line will result in no object. After looking at the code it became clear that it should be formattedDate = $.jgrid.parseDate('Y-m-d', cellval, 'd-M-Y', fullOpts). – Pensive

@ZoltanFedor: I agree that the code from the old demo should be modified to use either $.fn.fmatter.date or $.jgrid.parseDate. For example the usage of formattedDate = $.fn.fmatter.call(this, "date", cellval, opts, rowObject, action) seems me the most native. One should uncomment additionally the option formatoptions: { newformat: "d-M-Y" } in the "invdate" column. The results seems me the same as on my original demo. – Iselaisenberg