RadGrid Column Alignment Issue in IE 9 in Visual Studio

[Tom]

Hello,

I am having a strange problem with the RadGrid on IE 9.  The grid looks fine when published to a site, but when I am debugging code in Visual Studio 2008 the column alignment does not align with the headers.  This is affecting all grids in every .NET project that I have, but again - only when debugging or browsing the page from within Visual Studio.

This issue originally occurred when I went to IE 9 and only occurs when debugging or browsing a page in Visual Studio.  I had found a fix before, but cannot remember what the fix was (it was a either a setting in either IE or a modification to the skin for the grid) and cannot find it now.  Once the latest ASP.NET AJAX update was applied, the issue came back.  A sample of a grid that is affected by this issue is provided below.

<asp:Content ID="ViewEventLogContent" ContentPlaceHolderID="ViewEventLogContent" Runat="Server">
    <asp:Panel ID="pnlEventLog" runat="server" Visible="false">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="gridTableStyle">
    <tr><td style="height:10px"> </td></tr>
    <tr>
        <td>
            <telerik:RadGrid ID="RadGridEventLog" runat="server"
                    AutoGenerateColumns="false" AllowSorting="True" AllowPaging="true" Skin="Simple" ClientSettings-Resizing-AllowColumnResize="true"
                    ItemStyle-Wrap="false" Width="95%" HeaderStyle-Wrap="false" PageSize="10"
                    OnNeedDataSource="RadGridEventLog_NeedDataSource">
                    <PagerStyle Mode="NumericPages" />
                    <ClientSettings>
                        <Scrolling AllowScroll="true" UseStaticHeaders="true"  />
                    </ClientSettings>
                    <MasterTableView TableLayout="Fixed" AllowMultiColumnSorting="true" DataKeyNames="EventLogId" ShowFooter="false" PagerStyle-AlwaysVisible="false" >
                        <Columns>
                            <telerik:GridBoundColumn DataField="EventLogId" HeaderButtonType="TextButton" HeaderText="Event Log ID" HeaderStyle-Width="100" />
                            <telerik:GridBoundColumn DataField="CampaignId" HeaderButtonType="TextButton" HeaderText="Campaign ID" HeaderStyle-Width="80" />
                            <telerik:GridBoundColumn DataField="EventStatusDesc" HeaderButtonType="TextButton" HeaderText="Event Status" HeaderStyle-Width="160" />
                            <telerik:GridBoundColumn DataField="EventTypeDesc" HeaderButtonType="TextButton" HeaderText="Event Type" HeaderStyle-Width="100" />
                            <telerik:GridBoundColumn DataField="EventReasonDesc" HeaderButtonType="TextButton" HeaderText="Event Reason" HeaderStyle-Width="100" />
                            <telerik:GridBoundColumn DataField="EventMessage" HeaderButtonType="TextButton" HeaderText="Event Message" HeaderStyle-Width="200" />
                            <telerik:GridBoundColumn DataField="FirstName" HeaderButtonType="TextButton" HeaderText="First Name" HeaderStyle-Width="150" />
                            <telerik:GridBoundColumn DataField="LastName" HeaderButtonType="TextButton" HeaderText="Last Name" HeaderStyle-Width="150" />
                            <telerik:GridBoundColumn DataField="ProfDesignation" HeaderButtonType="TextButton" HeaderText="Prof. Designation" HeaderStyle-Width="200" />
                            <telerik:GridBoundColumn DataField="StateLicenseNumber" HeaderButtonType="TextButton" HeaderText="SLN" HeaderStyle-Width="200" />
                            <telerik:GridBoundColumn DataField="StateOfLicensure" HeaderButtonType="TextButton" HeaderText="State of Licensure" HeaderStyle-Width="200" />
                            <telerik:GridBoundColumn DataField="EmailAddress" HeaderButtonType="TextButton" HeaderText="Email" HeaderStyle-Width="250" />
                            <telerik:GridDateTimeColumn DataField="CreateDate" HeaderButtonType="TextButton" HeaderText="Date" HeaderStyle-Width="150" DataFormatString="{0:MM/dd/yyyy hh:mm:ss tt}" />
                        </Columns>
                    </MasterTableView>
            </telerik:RadGrid>
        </td>
    </tr>
    </table>
    </asp:Panel>
</asp:Content>

Thanks,

[Tom]

An addition to the post is that everything works when the compatibility view is turned on in Internet Explorer 9 when debugging.

[Princy]

Hello Tom,

IE9 RC Compatibility Mode supports latest version of RadGrid controls . So try upgrading to the latest version and check whether the issue still persists. Check the following help documentation which explains more about this.
Upgrading RadControls Trial to RadControls Developer license or newer version

Thanks,
Princy.

[Gowri]

Hi
I have some issues with RadGrid, item displaying in IE 9...It works well with IE 8, loads and  displays the data...

In IE 9 RadGrid loads the data but does display anything it looks blank. I am really new to telerik radcontrols and working on someone's
code.  Please I need ur help !!!
 
meta tag compatabiliity is IE 7

 

 

<add name="X-UA-Compatible" value="IE=EmulateIE7" />

<telerik:RadGrid ID="rgUnRecipient" runat="server" AutoGenerateColumns="False" Skin="Vista"

Width="100%" AllowPaging="False" AllowMultiRowSelection="true" GridLines="None"

Style="cursor: hand;" Height="107px" OnItemDataBound="rgUnRecipient_ItemDataBound">

<MasterTableView DataKeyNames="PersonID" TableLayout="Fixed" ClientDataKeyNames="PersonID">

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name">

<ItemStyle HorizontalAlign="Left" Width="100%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="IsAccountInActive" Visible="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings EnablePostBackOnRowClick="false">

<Selecting AllowRowSelect="True" />

<ClientEvents OnColumnClick="rgUnRecipientSorting" />

<Scrolling AllowScroll="True" SaveScrollPosition="True" ScrollHeight="150px" UseStaticHeaders="true" />

</ClientSettings>

<FilterMenu Skin="Office2007" EnableTheming="True">

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

</FilterMenu>

</telerik:RadGrid>

Thanks,Gowri

[Princy]

Hello Gowri,

I cannot reproduce the issue at my end. RadGrid loads in IE9 as expected. Make sure that you use Advanced data binding using NeedDataSource.

Thanks,
Princy.

[Edmond]

I'm experiencing the same issues with RadGrid and IE9:  "the column alignment does not align with the headers".  The columns do not align on IE9 when Compatibility View Settings is selected.  Even if I have the following meta-tag in my header.  <meta http-equiv="X-UA-Compatible" content="IE=9" />  They do align when I remove the Compatibility View Settings.

[Pavlina]

Hello Edmond,

Please make sure that TableLayout property of the MasterTableView is set to true and HeaderStyle-Width property is declared for grid columns.

Best wishes,
Pavlina
the Telerik team

[Pavlina]

Hi Edmond,

You could also try to leave one column without width(for example the last one). Note that when the RadGrid is used with fixed width and static headers and you set some column widths, it is good to leave one column without width. Please refer to forum thread below for more information:
http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx

Regards,
Pavlina
the Telerik team

[marco]

tablelayout property of the master table cannot be set to true.
It can be only set to Auto or Fixed.

[Pavlina]

Hi,

Please excuse me for this misunderstanding. I mean to set TableLayout property to Fixed.

Kind regards,
Pavlina
the Telerik team

[Prab]

i am using radgrid ..its working fine in firefox but its showing alignment problems [white lines]in IE9...plaese help me to solve this problems...the following codes are used in my applications


  <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
                            <telerik:RadGrid ID="RadGrid1" runat="server" OnItemDataBound="RadGrid_ItemBound"
                                Height="400px" AllowSorting="True" AllowMultiRowSelection="true" AllowPaging="false"
                                ShowGroupPanel="false" GridLines="None" AutoGenerateColumns="false" Skin="Office2007"
                                OnNeedDataSource="RadGrid1_NeedDataSource">
                                <MasterTableView DataKeyNames="MsgSender_DateTime" DataMember="MsgSender_DateTime"
                                    AllowMultiColumnSorting="false" TableLayout="Fixed" Width="100%">
                                    <GroupByExpressions>
                                        <telerik:GridGroupByExpression>
                                            <SelectFields>
                                                <telerik:GridGroupByField FieldAlias="Received" FieldName="MsgSender_Date" FormatString="{0:D}"
                                                    HeaderValueSeparator=" on: "></telerik:GridGroupByField>
                                            </SelectFields>
                                            <GroupByFields>
                                                <telerik:GridGroupByField SortOrder="Descending" FieldName="MsgSender_Date" FormatString=""
                                                    HeaderText=""></telerik:GridGroupByField>
                                            </GroupByFields>
                                        </telerik:GridGroupByExpression>
                                    </GroupByExpressions>
                                    <Columns>
                                                  <HeaderStyle Width="45px" HorizontalAlign="Center"></HeaderStyle>
                                            <ItemTemplate>
                                                <asp:Label ID="lblSlNo" runat="server"></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>                               ........................................................................................................
................................
..........
.
.
.
.
.

                                    </Columns>
                                </MasterTableView>
                                <ClientSettings EnableRowHoverStyle="true">
                                    <Selecting AllowRowSelect="True"></Selecting>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="275px"></Scrolling>
                                </ClientSettings>
                            </telerik:RadGrid>

[Pavlina]

Hi PRABHAKARAN,

Which version of RadControls are you using in your project? Can you please check if the described problem persists in the latest version of RadControls for ASP.NET AJAX?

Regards,
Pavlina
the Telerik team

[Prab]

thank u for your reply...i am using 2011.2.915.35 version

[Pavlina]

Hello,

This problem is fixed in Q3 2011 version of RadControls. Please upgrade to this version or the lates one to take care of it. You can follow the instructions from this KB article in order to upgrade your controls to a newer version of the suite.   

Greetings,
Pavlina
the Telerik team

[Christian Jernberg]

Many thanks! This solved the problem with my blank RadGrid in IE9.

[Kanchan]

Hi Telerik team,

I am using window 7 with IE 9 and telerik  Q3 version (2012_3_1308,ddl from bin 35) and VS2010 .In my application we are using rad window .Rad Window is open but its show not properly.(not show header proper and lenth also not show proper).When using meta tag <meta http-equiv="X-UA-Compatible" content="IE=7" /> , rad window show properly but rad grid show blank.


Please help us for the same.

Thanks
Kanchan Prabha

[Kanchan]

How can we download Q3 2011 version of RadControls , if any link please provide me.

[Kanchan]

Gowri,
Have you got the solution if yes please help me becasuse I am also using

<add name="X-UA-Compatible" value="IE=EmulateIE7" />

tag on page.

[Sam Bronchetti]

I am having the same issue and I am using the most recent version of RadControls for ASP.NET.  It only happens in IE9 Compatibility Mode.  If I remove the browser from compatibility mode, it works fine.  We are also seeing other issues with RadGrid functionality when the browser is in Compatibility mode.  One is that none of the styling of the grid using the included skins work at all, so you get a rather ugly looking grid.

If someone has fixed this, I would love to know.

[Pavlina]

Hello Sam,
 
Can you try setting MasterTableView Width property to 100% as shown below and let me know if it helps?

.rgMasterTable
{
    width: 100%;
}

Regarding the skin issue, can you confirm that you are not using any custom styles.

In case the issues still persist please provide the grid declaration and the related code behind, so we can investigate the problem further.

Regards,
Pavlina
Telerik

[Sam Bronchetti]

That seems to work.  I will do more testing, but looks good!
Thanks.