[Solved] Grouping with hidden column will display the hidden column.

[Walter]

I have a grid using ajax binding to a DataTable with 7 columns. The last column is a hidden column. Without any grouping being used, the 6 visible columns display properly and align with the header correctly. When a user uses the grouping the grouping rows are incorrectly added to the table with a colspan of 8. A grouping column is added to the front of the table which should be 1 grouping column + 6 visible columns = grouping row with a colspan of 7.
What I see happening is that the hidden column is not removed from the calculation used to generate the colspan for the grouping row. This is not a problem in Internet Explorer because it will ignore the incorrect colspan of 8 when there are only 7 visible columns. The problem is in Chrome and FireFox where they will display an 8th empty column at the right side of the grid. (I have display:none set on the hidden column so I do not see the data but without that, the hidden column data is displayed.) The header row displays the correct 6 columns + the grouping column. The extra column is only displayed in the table body which causes the data columns to not align with the header columns.

To fix this error, I used some javascript to find the grouping rows and adjust the colspan to the correct value when the data is rebound to the grid after grouping. Is this a bug in the grid or should I be handling hidden columns and grouping differently?

function onDataBound() {
    var rows = $('.t-grouping-row');
    rows.each(function () {
        var tds = $(this).children();
        tds.each(function () {
            var td = $(this);
            td.attr('colSpan', td.attr('colSpan') - 1);
        });
    });
}