jqGrid and jqPivot 4.7: Incorrect names for pivoted columns

Question

This sample uses jqGrid 4.6:

http://jsfiddle.net/aUDHx/1218/

As one can see, regardless of the number of aggregates, the header names are displayed correctly ("A A", "A B", etc.)

However, when I switch to version 4.7, the pivoted columns aren't named correctly when more than one aggregate is used:

http://jsfiddle.net/aUDHx/1219/

If only one aggregate is used, the headers display correctly.

Does 4.7 have a different method of specifying the header names, or is this a bug? If the latter, does an appropriate workaround exist?

This is the code for the yDimension:

yDimension: [{
        dataName: 'product',
        converter: function (val) {return val.replace(/\s/g, ' ');}
    }],

The converter function is used to correctly format the header name. This is not required in 4.7 if you only use one aggregate, but anything more than that causes it to break.

"Gurrido" is now the new name of jqGrid.

Answer 1

The problem is in spaces which you use in names. jqPivot don't support currently spaces in the names. You can fix the problem by replacing the spaces to _ (underscore) for example. I described the workaround here.

By the way Gurrido jqGrid is not the only successor of free open source jqGrid with MIT licence. After starting Gurrido jqGrid some other jqGrid forks of the last free jqGrid is developing. I post my results here. I plan to publish new version probably in the current month. Another fork you can find here. One apply in the fork many changes which I make in my repository, but one make some his own changes too.

UPDATED: The problem with the labels which you described is a bug in jqGrid 4.7. By the way you don't need to use the converter in case of usage spaces in the aggregation values.

I posted the bug fix here in my jqGrid repository. You can see the results on the demo http://jsfiddle.net/OlegKi/b47ocLd7/

The demo uses the following JavaScript code

var mydata = [
    { id: "1", product: "A A", sold: "8", sold2: "8", sold3: "8", emp: "Michelle" },
    { id: "2", product: "A A", sold: "3", sold2: "8", sold3: "8", emp: "Tania" },
    { id: "6", product: "A B", sold: "1", sold2: "8", sold3: "8", emp: "Mark" },
    { id: "3", product: "A B", sold: "5", sold2: "8", sold3: "8", emp: "Tommy" },
    { id: "4", product: "B B", sold: "2", sold2: "8", sold3: "8", emp: "Dave" },
    { id: "5", product: "B B", sold: "5", sold2: "8", sold3: "8", emp: "Carol" }
];

$("#grid").jqGrid("jqPivot", mydata, {
        xDimension: [
            { isGroupField: false, width: 40, dataName: "id",  label: "ID" },
            { isGroupField: false, width: 80, dataName: "emp", label: "Employee" }
        ],
        yDimension: [
            { dataName: "product" }
        ],
        aggregates: [
            { aggregator: "sum", width: 60, member: "sold",  label: "Sold" },
            { aggregator: "sum", width: 60, member: "sold2", label: "Sold 2" }
        ],
        colTotals: true
    },
    {
        height: "auto",
        pager: "#pager",
        iconSet: "fontAwesome",
        resizeStop: function () {
            $(this).jqGrid("setGridWidth", this.grid.newWidth, false);
        },
        caption: "Daily Sales"
    }
);