jqPivot is grouping column headers that do not belong to the group

Question

I am trying to utilize the column header group functionality of jqgrid's jqpivot to have two column headers (A header for day of the week, and another header for the actually date).

    var crewAttendance = { "total": 1, "page": 0, "records": 7,
            "rows": [
                { "ID": "1", "UserID": "10", "AttendanceTypeID": "6", "AttendanceDate": "04/05/15", "AttendanceDay": "SUN" },
                { "ID": "21", "UserID": "10", "AttendanceTypeID": "12", "AttendanceDate": "04/06/15", "AttendanceDay": "MON" },
                { "ID": "41", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/07/15", "AttendanceDay": "TUE" },
                { "ID": "61", "UserID": "10", "AttendanceTypeID": "17", "AttendanceDate": "04/08/15", "AttendanceDay": "WED" },
                { "ID": "81", "UserID": "10", "AttendanceTypeID": "17", "AttendanceDate": "04/09/15", "AttendanceDay": "THU" },
                { "ID": "101", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/10/15", "AttendanceDay": "FRI" },
                { "ID": "121", "UserID": "10", "AttendanceTypeID": "19", "AttendanceDate": "04/11/15", "AttendanceDay": "SAT" }
            ], "userID": ["10"], "firstName": ["Christopher"]
        }
        // create jqPivot Grid
    var grid = $("#pvtCrewAttendance");
    grid.jqGrid("jqPivot",
        crewAttendance.rows,
        {
            xDimension: [
                {
                    isGroupField: false,
                    width: 70,
                    dataName: 'UserID',
                    label: 'UserID'
                }
            ],
            yDimension: [
                {
                    dataName: 'AttendanceDay'
                },
                {
                    dataName: 'AttendanceDate'
                }
            ],
            aggregates: [
                {
                    aggregator: 'max',
                    width: 80,
                    member: 'AttendanceTypeID',
                    summarytype: 'count',
                    sortable: true,
                    resizable: false
                }
            ],
            groupSummary: false,
            colTotals: true
        },
    // grid options
        {
        height: 'auto',
        pager: '#nav',
        caption: 'Crew Attendance'
    });

    var cm = grid.getGridParam('colModel');
    for (var iCol = 0; iCol < cm.length; iCol++) {
        var cmi = cm[iCol];
        if (cmi.label.length == 3 || cmi.label.length == 0 || cmi.label == '\&nbsp\;') {
            grid.jqGrid('hideCol', cmi.name);
        }
    }
    grid.trigger('reloadGrid');

and so far it is working for SUN and MON but for some reason, jqPivot's column header grouping is not working properly for the rest of the days (TUE and WED combines, and then THU, FRI, and SAT also combines but they should not because they are at different dates). See jsFiddle here

How can I make it work for the rest of the days?

NOTE: I cannot combine the two headers together because I am going to rotate the date by 90 degrees. I've already done this part, but removed it in the fiddle to lessen the clutter.

Answer 1

Thank you for the bug report!

After long debugging I found and fixed the bug. Your demo uses the latest sources from GitHub directly. So the the last changes are applied to the demo too. You can verify that it displays now the correct results.

UPDATED: I implemented more fixes in the commit and in this one for jsPivot module. There should fix the old bugs, which come from jqGrid 4.7. Now your JSFiddle demo https://jsfiddle.net/OlegKi/4en1b68c/7/ produce correct results (I made some cosmetic changes in the demo). I hope that the code works correct for more complex input data too. Moreover you can remove the last block with hiding of columns having cmi.label.length == 3 || cmi.label.length == 0 || cmi.label == '\&nbsp\;'. I interpret the existence of the columns as one more bug and so I modified the code so that the columns don't exist more in the grid.