RadGrid Column Alignment Issue in IE 9 in Visual Studio

21 posts, 0 answers
  1. Tom
    Tom avatar
    41 posts
    Member since:
    Feb 2009

    Posted 05 Aug 2011 Link to this post

    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,

  2. Tom
    Tom avatar
    41 posts
    Member since:
    Feb 2009

    Posted 05 Aug 2011 Link to this post

    An addition to the post is that everything works when the compatibility view is turned on in Internet Explorer 9 when debugging.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Aug 2011 Link to this post

    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.
  5. Gowri
    Gowri avatar
    1 posts
    Member since:
    Sep 2011

    Posted 27 Oct 2011 Link to this post

    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
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Oct 2011 Link to this post

    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.
  7. Edmond
    Edmond avatar
    2 posts
    Member since:
    Dec 2011

    Posted 13 Dec 2011 Link to this post

    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.

  8. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Dec 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Dec 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  10. marco
    marco avatar
    33 posts
    Member since:
    Sep 2007

    Posted 08 Jan 2012 Link to this post

    tablelayout property of the master table cannot be set to true.
    It can be only set to Auto or Fixed.
  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 08 Jan 2012 Link to this post

    Hi,

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

    Kind regards,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  12. Prab
    Prab avatar
    15 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2012 Link to this post

    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>
  13. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  14. Prab
    Prab avatar
    15 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2012 Link to this post

    thank u for your reply...i am using 2011.2.915.35 version
  15. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  16. Christian Jernberg
    Christian Jernberg avatar
    2 posts
    Member since:
    Jul 2008

    Posted 21 Mar 2012 Link to this post

    Many thanks! This solved the problem with my blank RadGrid in IE9.
  17. Kanchan
    Kanchan avatar
    8 posts
    Member since:
    Aug 2012

    Posted 15 Feb 2013 Link to this post

    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

  18. Kanchan
    Kanchan avatar
    8 posts
    Member since:
    Aug 2012

    Posted 15 Feb 2013 Link to this post

    How can we download Q3 2011 version of RadControls , if any link please provide me.
  19. Kanchan
    Kanchan avatar
    8 posts
    Member since:
    Aug 2012

    Posted 18 Feb 2013 Link to this post

    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.
  20. Sam Bronchetti
    Sam Bronchetti avatar
    12 posts
    Member since:
    Sep 2012

    Posted 17 Feb 2014 Link to this post

    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.
  21. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 19 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  22. Sam Bronchetti
    Sam Bronchetti avatar
    12 posts
    Member since:
    Sep 2012

    Posted 19 Feb 2014 in reply to Pavlina Link to this post

    That seems to work.  I will do more testing, but looks good!
    Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017