RadGrid Column Headers Out of Sync (IE8)

[Jeff Grol]

I have a RadGrid inside a user control that is placed on a page inside a div tag.   I am setting the width to 100% so that when screen resolutions change, the grid expands or shrinks to correctly fill entire container.   I have UseStaticHeaders set to true and fixed widths on the columns.   When the grid loads in IE 8, the columns expand correctly but the headers are compressed and end about 1/2 of the way across the grid.  The footer does the same thing (In Firefox, everything works correctly).   Also, if I set UseStaticHeaders to "false", it also works correctly but then I have to scroll down to see the footer.  When the grid loads, if I double-click on one of column headers, they all expand correctly to fill the grid.  I just can't seem to get them to do that initially without having to double-click on them.  I downloaded and installed the latest Telerik patch (2009.3.1208.35), but it did not help.

[Dimo]

Hello Jeff,

We will need a sample page in order to reproduce the problem and see what causes it. Thank you in advance.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Katie Arnott]

Was this ever resolved?  I am having the exact same problem.

Thank you,
Katie

[Dimo]

Hi Katie,

Please provide more information about your scenario, i.e. a code snippet, which we can run locally. Thank you.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jeff Grol]

No, I never had time to create a prototype and have shelved that piece of the application for the time being.  If you find a resolution, please pass it along.  Thank you.

[Katie Arnott]

<rad:RadGrid ID="studentListData" runat="server" Skin="Web20" AllowFilteringByColumn="False"
                AlternatingItemStyle-BackColor="BlanchedAlmond" AllowPaging="False" AllowSorting="True" EnableAJAX="True"                 GridLines="Both" HeaderStyle-BackColor="white" HeaderStyle-ForeColor="Navy" Title="Graph Title" OnColumnCreated="fixDisplay" Width="100%" ShowHeader="true" AutoGenerateColumns="false" HorizontalAlign="Left"   >
    <HeaderStyle Width="100px"  />
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="true" FrozenColumnsCount="0" />
        <Resizing AllowColumnResize="true" />   
    </ClientSettings>
    <ItemStyle Width="100%" />
    <MasterTableView TableLayout="Fixed" >
        <Columns>
        <rad:GridBoundColumn  DataField="ID" HeaderText="ID" Visible="false"  HeaderStyle-BackColor="white" HeaderStyle-ForeColor="Navy" ItemStyle-Width="100px"  />
            <rad:GridHyperLinkColumn ItemStyle-BorderStyle="Solid" ItemStyle-BorderColor="#000000" ItemStyle-BorderWidth="1px" HeaderStyle-BorderStyle="Solid"
                                    HeaderStyle-BorderColor="#000000" HeaderStyle-BorderWidth="1px"
                 UniqueName="UICNav"  HeaderText="UIC" DataTextField="UIC" DataNavigateUrlFields="ID,UIC" DataNavigateUrlFormatString="~/studentHistory/StudentRecord.aspx?ID={0}&UIC={1}">
            </rad:GridHyperLinkColumn>
        </Columns>
    </MasterTableView>
</rad:RadGrid>


- so the grid is getting filled dynamically, but the column headers are not being set to my width, nor are my item column headers, nor are they lining up.  When I set UseStaticHeaders="false", the columns line up.

Thank you,

[Katie Arnott]

When I set UseStaticHeaders="false", the columns also are set to my fixed width.

[Katie Arnott]

and (sorry) everything works correctly in FF, my problem is only in IE. (using IE8)

[Dimo]

Hello Katie,

It looks like you are using the old ("classic") RadGrid for ASP.NET? In this case you should trigger Compatibility Mode in IE8. This mode is similar to IE7.

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

http://blogs.msdn.com/ie/archive/2008/08/27/introducing-compatibility-view.aspx

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dimo]

P.S.

Please use only HeaderStyle-Width to set column width.

Try removing everything in red:


<rad:RadGrid ID="studentListData" runat="server" Skin="Web20" AllowFilteringByColumn="False"
                AlternatingItemStyle-BackColor="BlanchedAlmond" AllowPaging="False" AllowSorting="True" EnableAJAX="True"                 GridLines="Both" HeaderStyle-BackColor="white" HeaderStyle-ForeColor="Navy" Title="Graph Title" OnColumnCreated="fixDisplay" Width="100%" ShowHeader="true" AutoGenerateColumns="false" HorizontalAlign="Left"   >
    <HeaderStyle Width="100px"  />
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="true" FrozenColumnsCount="0" />
        <Resizing AllowColumnResize="true" />   
    </ClientSettings>
    <ItemStyle Width="100%" />
    <MasterTableView TableLayout="Fixed" >
        <Columns>
        <rad:GridBoundColumn  DataField="ID" HeaderText="ID" Visible="false"  HeaderStyle-BackColor="white" HeaderStyle-ForeColor="Navy" ItemStyle-Width="100px"  />
            <rad:GridHyperLinkColumn ItemStyle-BorderStyle="Solid" ItemStyle-BorderColor="#000000" ItemStyle-BorderWidth="1px" HeaderStyle-BorderStyle="Solid"
                                    HeaderStyle-BorderColor="#000000" HeaderStyle-BorderWidth="1px"
                 UniqueName="UICNav"  HeaderText="UIC" DataTextField="UIC" DataNavigateUrlFields="ID,UIC" DataNavigateUrlFormatString="~/studentHistory/StudentRecord.aspx?ID={0}&UIC={1}">
            </rad:GridHyperLinkColumn>
        </Columns>
    </MasterTableView>
</rad:RadGrid>


Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Katie Arnott]

Ah, Thank you Dimo - Adding the compatibility tag (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />) solved the problem! (It had to be the first thing under my <head> tag in my root.master in order to work).

Thank you as well Jeff!

[Steve]

Wait a minute.... So what you're suggesting is that there is NOT an IE8 solution for RadGrid except to run the code in IE7 compatibility using a Meta Tag of <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />?

Please tell me that you have a better solution for this for IE8.

[Katie Arnott]

I believe this is resolved(?) with the newest version of the RadControls.. I believe the compatibility mode was just a fix using the 'old' RadControls...