Collapsing all groups using IE10

[ITOPERATIONS]

Hi,

When I am using the KendoUI grid with grouping and collapse all groups the column width is not maintained in IE. See the screenshot I did on the KendoUI demo's. When I do the same in either Chrome or FireFox the column widths are preserved as I would expect.

Is there a way that I can configure the grid so that IE also has the same behavior as Chrome and FireFox here?

BTW It seems that the Telerik RadControls do have the desired behavior across browsers.

[Dimiter Madjarov]

Hello Catrina,


Could you please share the steps to reproduce the issue or the sample code, that you are executing, as I was unable to reproduce the issue on our side?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

[ITOPERATIONS]

I can reproduce this every time using the following steps.

1. Start IE 10 or IE9
2. Open the basic grid demo at http://demos.kendoui.com/web/grid/index.html.
3. Drag the "Contact Title" column header to the grouping bar that says "Drag a column header and drop it here to group by that column".
4. Drag the "Country" column header to the same grouping bar.
5. Click each triangle in front of each "Country" group header to collapse them all. Make sure the "Contact Title" group is not collapsed
6. Note that when you collapse the last country "Venezuela" the column with the country group headers jumps to the right.

The expected behavior is that the columns are not resized when I collapse the last country.

Note: In Chrome, FireFox or IE11 the expected behavior occurs.

[Dimiter Madjarov]

Hello Catrina,


Thank you for the additional details. We managed to reproduce the problem on our side too. It turned out that it is a caused by a browsers issue i.e. the inability of IE to size table columns properly in the scenario when only rows with spanned cells are visible.

A possible workaround would be to add an empty row at the end of the Grid, which will help the browser to render the groups correctly. I am adding the additional JavaScript and CSS code, that will be required.
E.g.

function appendEmptyRow() {

    if (kendo.support.browser.msie) {
        var grid = this,
            row = grid.tbody.children('tr').last(),
            groupCells = row.children('.k-group-cell').length,
            dataCells = row.children('td').length - groupCells,
            str = '<tr class="hiddenRow">',
            j;

        if (groupCells === 0) {
            return;
        }

        for (j = 0; j < groupCells; j++) {
            str += '<td class="k-group-cell"> </td>';
        }

        for (j = 0; j < dataCells; j++) {
            str += '<td> </td>';
        }

        str += '</tr>';

        $(str).appendTo(grid.tbody);
    }
}

$("#grid").kendoGrid({
    dataBound: appendEmptyRow //add the row on dataBound
});

.k-grid .hiddenRow
{
    display: table-row !important;
}

.k-grid .hiddenRow td
{
    height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

Regards,
Dimiter Madjarov
Telerik

[ITOPERATIONS]

Hi Dimiter,

That worked like a charm.

Thanks,
Maurice