This is a migrated thread and some comments may be shown as answers.

Collapsing all groups using IE10

4 Answers 25 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ITOPERATIONS
Top achievements
Rank 1
ITOPERATIONS asked on 10 Jan 2014, 10:42 AM
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.

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 10 Jan 2014, 12:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ITOPERATIONS
Top achievements
Rank 1
answered on 10 Jan 2014, 01:00 PM
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.

0
Dimiter Madjarov
Telerik team
answered on 10 Jan 2014, 02:29 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ITOPERATIONS
Top achievements
Rank 1
answered on 13 Jan 2014, 02:29 PM
Hi Dimiter,

That worked like a charm.

Thanks,
Maurice

Tags
Grid
Asked by
ITOPERATIONS
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
ITOPERATIONS
Top achievements
Rank 1
Share this question
or