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

Collapsing two groups in grid displays badly in IE9

1 Answer 29 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Guillaume
Top achievements
Rank 1
Guillaume asked on 11 Oct 2012, 06:54 PM
Go to the demo site http://demos.kendoui.com/web/grid/index.html, drag two columns for grouping and collapse all items.
The second group shifts to the right in IE9. Have to put it in compatibility mode for it to work.
Please provide a workaround or a fix for this.
Thank you.

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 22 Jul 2013, 11:17 AM
Hello,

What I can suggest as a work around is the following.

When the dataBound event occurs prepend a table row with styles that makes it invisible.

e.g.

dataBound: function () {
     this.tbody.prepend('<tr class="k-invisible"><td></td><td></td><td></td><td></td><td></td><td></td></tr>')
},

And the following styles:

<style type="text/css">
    .k-invisible
    {
        padding:0px;
        font-size:0px;
        line-height:1px;       
    }
    .k-invisible td
    {
        border-color:transparent;
    }
</style>

Here is a JsBin example:

http://jsbin.com/inudan/2/edit


Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Guillaume
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or