jqGrid drag and drop headings for grouping .... Group Name

Question

I have setup drag and drop headings to group by the relevant column from jQgrid Grouping Drag and Drop

It works great however I am trying to display the column name before the value i.e.

Client : Test data data
Client : Test2 data data

I've been going around in circles if any one could help.
if i take the same code used for the dynamic group by which should be the (column Name)
I end up with The Column data not the column name.

$('#' + gridId).jqGrid('groupingGroupBy', getheader());

function getheader() {
    var header = $('#groups ol li:not(.placeholder)').map(function () {
                      return $(this).attr('data-column');
                 }).get();
    return header;
}

if i use the same function in group text I get data not the column name.

I've come from C# and I am very new to jQuery.

If any one could help it would be greatly appreciated.

Kind Regards,
Ryan

Answer 1

First of all the updated demo provides the solution of your problem:

Another demo contains simplified demo which demonstrates just how one could display the grouping header in the form Column Header: Column data in the grouping header instead of Column data used as default.

The main idea of the solution is the usage of formatDisplayField property of groupingView which I suggested originally in the answer. The current version of jqGrid support the option. If one would use for example the options

grouping: true,
groupingView: {
    groupField: ["name", "invdate"],
    groupColumnShow: [false, false],
    formatDisplayField: [
        customFormatDisplayField,
        customFormatDisplayField
    ]
}

where customFormatDisplayField callback function are defined as

var customFormatDisplayField = function (displayValue, value, colModel) {
    return colModel.name + ": " + displayValue;
}

will display almost the results which you need, but it will uses name property of colModel instead of the corresponding name from colNames. To makes the final solution one use another implementation of customFormatDisplayField:

var getColumnHeaderByName = function (colName) {
        var $self = $(this),
            colNames = $self.jqGrid("getGridParam", "colNames"),
            colModel = $self.jqGrid("getGridParam", "colModel"),
            cColumns = colModel.length,
            iCol;
        for (iCol = 0; iCol < cColumns; iCol++) {
            if (colModel[iCol].name === colName) {
                return colNames[iCol];
            }
        }
    },
    customFormatDisplayField = function (displayValue, value, colModel, index, grp) {
        return getColumnHeaderByName.call(this, colModel.name) + ": " + displayValue;
    };