Column Width Wrong in IE8 and Overlapping Hyperlinks

19 posts, 0 answers
  1. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 13 May 2009 Link to this post

    Ever since upgrading to the new 2009 Q1 my column widths are being ignored in IE8.

    Everything renders perfect in Firefox and Opera, but IE8 is broken. In addition to the column widths being ignored, any template fields with hyperlinks are crossing over into other columns. I'm using the converted "Vista" skin provided by Telerik to maintain the Q3 2008 look. The Q3 2008 release did not have this issue. I'm wondering if you guys have tested the new skins with the MasterTableView TableLayout="Fixed" property set. Also, In all my grids I set widths for all columns except one, so that any extra width will go to that column. This has never been a problem until the new release. Here is my markup, although I'm not sure how helpful it will be. I emptied out my template fields just to rule out the contents of them causing the problem.

      <telerik:RadGrid ID="DetailGrid" runat="server" AllowPaging="True" AllowSorting="True"
                    AllowCustomPaging="True" GridLines="None" ShowGroupPanel="True" AutoGenerateColumns="false"
                    CssClass="grid2Line" PageSize="10" MasterTableView-AllowCustomPaging="true" Skin="swVista"
                    EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" OnNeedDataSource="DetailGrid_NeedDataSource"
                    OnSortCommand="DetailGrid_SortCommand">
                    <MasterTableView TableLayout="Fixed" OverrideDataSourceControlSorting="true" Width="100%">
                        <PagerTemplate>
                            <uc1:GridPagerTemplate ID="GridPagerTemplate1" runat="server" />
                        </PagerTemplate>
                        <PagerStyle AlwaysVisible="true" />
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px"></HeaderStyle>
                        </ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn UniqueName="StartTimeClean" SortExpression="StartTime" HeaderText="Arrived"
                                GroupByExpression="StartTimeGB Arrived Group By StartTimeGB" DataField="StartTimeClean"
                                ItemStyle-CssClass="gridItemRow" ItemStyle-HorizontalAlign="Right" Visible="True">
                                <HeaderStyle Width="90px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn UniqueName="LocationImage" Visible="true" HeaderText="From"
                                SortExpression="CountryName" GroupByExpression="CountryName Country Group By CountryName">
                                <HeaderStyle Width="54px" HorizontalAlign="Center"></HeaderStyle>
                                <ItemStyle></ItemStyle>
                                <ItemTemplate>
                                    DODO
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn UniqueName="Visit" DataFormatString="{0:###,###,##0}" SortExpression="VisitNumber"
                                HeaderText="Visit" DataField="VisitNumber" ItemStyle-HorizontalAlign="Center"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-CssClass="gridItemRow" GroupByExpression="VisitNumber Visit Group By VisitNumber">
                                <HeaderStyle Width="52px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn UniqueName="TemplateColumn2" SortExpression="StartPageTitle"
                                HeaderText="Entry Page" GroupByExpression="StartPageURL Entry&nbsp;Page&nbsp;URL Group By StartPageURL">
                                <HeaderStyle></HeaderStyle>
                                <ItemStyle Height="35px"></ItemStyle>
                                <ItemTemplate>
                                    DODO
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="Location" GroupByExpression="Country Group By City"
                                SortExpression="Country" HeaderText="Location" Visible="false">
                                <HeaderStyle Width="0px"></HeaderStyle>
                                <ItemStyle Height="35px"></ItemStyle>
                                <ItemTemplate>
                                     DODOfs
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn UniqueName="CountryCode" SortExpression="CountryCode" HeaderText="CountryCode"
                                DataField="CountryCode" Visible="false">
                                <HeaderStyle Width="0px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="PageViews" DataFormatString="{0:###,###,##0}"
                                SortExpression="PageViews" HeaderText="Page Views" DataField="PageViews" ItemStyle-HorizontalAlign="Center"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-CssClass="gridItemRow" GroupByExpression="PageViews Page&nbsp;Views Group By PageViews">
                                <HeaderStyle Width="58px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="TimeOnClean" SortExpression="TimeOn" HeaderText="Time On"
                                GroupByExpression="TimeOn Time&nbsp;On Group By TimeOn" DataField="TimeOnClean"
                                HeaderStyle-HorizontalAlign="Center" ItemStyle-CssClass="gridItemRow" ItemStyle-HorizontalAlign="Center"
                                Visible="true">
                                <HeaderStyle Width="62px"></HeaderStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn UniqueName="TimeOn" SortExpression="TimeOn" HeaderText="Time On"
                                DataField="TimeOn" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
                                GroupByExpression="TimeOnGroupBy Time&nbsp;On Group By TimeOnGroupBy" Visible="false">
                                <HeaderStyle Width="62px"></HeaderStyle>
                                <ItemTemplate>
                                   DODO
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn UniqueName="Referrer" GroupByExpression="ReferrerName Referrer&nbsp;Name Group By ReferrerName"
                                HeaderText="Referrer / Keyword" SortExpression="ReferrerName">
                                <HeaderStyle Width="180px"></HeaderStyle>
                                <ItemStyle Height="35px"></ItemStyle>
                                <ItemTemplate>
                                   DODO
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowDragToGroup="False">
                    </ClientSettings>
                    <GroupingSettings GroupContinuesFormatString="" GroupContinuedFormatString="" />
                </telerik:RadGrid>

    Any help would be greatly appreciated as I am not able to use the new release with this issue present.

    Thanks,
    Levi
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 16 May 2009 Link to this post

    Hi Levi,

    Your RadGrid declaration works as expected on my side, with regard to the column widths. Below you can find my test page based on your code snippet. Let me know if I am missing something.

    Generally, the RadGrid skins do not contain column widths, so I doubt that it's the skin causing the problem. Of course, you can try one the embedded skins and see whether it makes any difference. Make sure that you are using Q1 2009 SP1 (2009.1.402) with IE8. The previous release - Q1 2009 (2009.1.311) was released before IE8 became official.

    As for the overflowing text, please add the following CSS rule to avoid it:

    .rgHeader,
    .rgRow td,
    .rgAltRow td
    {
        overflow:hidden;
    }


    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <script runat="server"
     
        protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        { 
            DataTable dt = new DataTable(); 
            DataRow dr; 
            int rowsNum = 200
            string[][] colsInfo = { 
        new string[] { "StartTimeClean", "date" }, 
        new string[] { "VisitNumber", "number" }, 
        new string[] { "PageViews", "number" }, 
        new string[] { "TimeOnClean", "date" }, 
        new string[] { "Referrer", "string" } 
    }; 
     
            for (int i = 0; i < colsInfo.Length; i++) 
            { 
                switch (colsInfo[i][1]) 
                { 
                    case "string": 
                        dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(String))); 
                        break; 
                    case "number": 
                        dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Int32))); 
                        break; 
                    case "date": 
                        dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(DateTime))); 
                        break; 
                    case "bool": 
                        dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Boolean))); 
                        break; 
                    default: 
                        break; 
                } 
            } 
     
            for (int j = 1; j <= rowsNum; j++) 
            { 
                dr = dt.NewRow(); 
     
                for (int k = 0; k < colsInfo.Length; k++) 
                { 
                    switch (colsInfo[k][1]) 
                    { 
                        case "string": 
                            dr[colsInfo[k][0]] = String.Format("{0} Row{1}", colsInfo[k][0], j); 
                            break; 
                        case "number": 
                            dr[colsInfo[k][0]] = j; 
                            break; 
                        case "date": 
                            dr[colsInfo[k][0]] = DateTime.Now; 
                            break; 
                        case "bool": 
                            dr[colsInfo[k][0]] = j % 2 == 1 ? true : false; 
                            break; 
                        default: 
                            break; 
                    } 
                } 
                dt.Rows.Add(dr); 
            } 
     
            (sender as RadGrid).DataSource = dt
        } 
         
    </script> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <style type="text/css"
     
    .rgHeader, 
    .rgRow td, 
    .rgAltRow td 
        overflow:hidden; 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadGrid ID="DetailGrid" runat="server" AllowPaging="True" AllowSorting="True" 
        Skin="Vista" OnNeedDataSource="RadGrid_NeedDataSource" 
        AutoGenerateColumns="false"
        <MasterTableView TableLayout="Fixed" Width="100%"
            <PagerTemplate> 
                GridPagerTemplate 
            </PagerTemplate> 
            <PagerStyle AlwaysVisible="true" /> 
            <Columns> 
                <telerik:GridBoundColumn UniqueName="StartTimeClean" HeaderText="Arrived" 
                    DataField="StartTimeClean"
                    <HeaderStyle Width="90px" /> 
                </telerik:GridBoundColumn> 
                <telerik:GridTemplateColumn UniqueName="LocationImage" HeaderText="From"
                    <HeaderStyle Width="54px" /> 
                    <ItemTemplate> 
                        DODO 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                <telerik:GridBoundColumn UniqueName="Visit" DataFormatString="{0:###,###,##0}" 
                    HeaderText="Visit" DataField="VisitNumber"
                    <HeaderStyle Width="52px" /> 
                </telerik:GridBoundColumn> 
                <telerik:GridTemplateColumn UniqueName="TemplateColumn2" HeaderText="Entry Page"
                    <ItemStyle Height="35px"></ItemStyle> 
                    <ItemTemplate> 
                        DODO 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
                <telerik:GridBoundColumn UniqueName="PageViews" DataFormatString="{0:###,###,##0}" 
                    HeaderText="Page Views" DataField="PageViews"
                    <HeaderStyle Width="58px" /> 
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn UniqueName="TimeOnClean" HeaderText="Time On" DataField="TimeOnClean"
                    <HeaderStyle Width="62px" /> 
                </telerik:GridBoundColumn> 
                <telerik:GridTemplateColumn UniqueName="Referrer" HeaderText="Referrer / Keyword"
                    <HeaderStyle Width="180px"></HeaderStyle> 
                    <ItemStyle Height="35px"></ItemStyle> 
                    <ItemTemplate> 
                       DODO 
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
     
    </form> 
    </body> 
    </html> 



    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ulrich Ruffiner
    Ulrich Ruffiner avatar
    1 posts
    Member since:
    Apr 2005

    Posted 04 Jun 2009 Link to this post

    We've just encountered the exact same problem using IE 8 and the Q1 2009 release of the controls. When we turn on "Compatibility View" in IE 8 however, the page is rendered the way it is in Firefox and IE 7, with cell column widths matching the header columns. We're using the Web20 skin.

    We're now investigating exactly what's going on with IE8 and its compatibility mode.


  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 04 Jun 2009 Link to this post

    Hi Ulrich,

    IE8 is supported by RadControls for ASP.NET AJAX Q1 2009 SP1 or later. Please upgrade.

    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 23 Jun 2009 Link to this post

    Nothing to do with the version of the Telerik DLLs. Even the new version does the same thing. This is still an issue for me and in this current state I cannot release my product. It is pretty frustrating. The columns widths work in every browser except IE.
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 25 Jun 2009 Link to this post

    Hi Levi,

    Did you try running the test page I have provided in my first post in this forum thread? It works as expected on my side. Let me know if you need more information.

    Best wishes,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. Morten Bomholt
    Morten Bomholt avatar
    22 posts
    Member since:
    Jan 2009

    Posted 26 Jun 2009 Link to this post

    Hey

    I thought i'd just point out that 

    <

     

    MasterTableView TableLayout="Fixed"

    Is what is needed to fix your problem.

    There is another problem though.

    It's seems that the last coulmn doesn't expand over the scroll area when the grid is scrolling. Just a white square now. :)

    This is a IE8 problem, works fine in IE7.

    Is there a solution for this problem ?

     

  9. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 26 Jun 2009 Link to this post

    Hi Morten,

    I am not usre what do you mean by

    "It's seems that the last coulmn doesn't expand over the scroll area when the grid is scrolling. Just a white square now."

    Can you please clarify and post your RadGrid declaration?

    In addition, your account shows that you have not downloaded RadControls for ASP.NET AJAX Q1 2009 SP1 or later. These versions support IE8, while the previous ones do not (you need to use a compatibility meta tag).

    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 02 Jul 2009 Link to this post

    I'd like to reinterate again that I am using the latest telerik version and this is still a problem in IE8. Works in every other browser perfectly and also worked in earlier Telerik releases before the skin redesigns, even in IE8.
  11. Stephen
    Stephen avatar
    17 posts
    Member since:
    Jan 2009

    Posted 02 Jul 2009 Link to this post

    I thought I would add my two cents too.  I am having the same problem under IE8 (works under Chrome and FF).  Interestingly if I refresh the Grid (using the Command Button) then the column widths are calculated correctly.  Is this a problem with the initial calculation of the column width?

    I am using 2009 Q1 SP1 build 527 and I do have TableLayout="Fixed" on my MasterTableView.

    Thanks

    Stephen
  12. Stephen
    Stephen avatar
    17 posts
    Member since:
    Jan 2009

    Posted 02 Jul 2009 Link to this post

    Not sure if it's all part of the same issue, but I have noticed that when my grid is sized to fill the RadPane that it is in, there is a blank line under the grid (like someone put a break after it).  When I switch to compatability mode, the blank line moves to between the data and the pager. 
  13. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 03 Jul 2009 Link to this post

    Hi all,

    The problem with overlapping cell content in IE8 and non-IE browsers is fixed In the latest version of RadControls for ASP.NET AJAX, which is 2009.2.701 (Q2 2009).

    As for the column widths, please refer to my test page above, which works as expected. If you need more information, please send your complete RadGrid declarations.

    As for the blank line inserted after RadGrid inside a RadPane, this should not occur. Here is a demo, which works as expected:

    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  14. Tom Molloy
    Tom Molloy avatar
    1 posts
    Member since:
    Jul 2009

    Posted 10 Jul 2009 Link to this post

    Is there any workaround for these overlapping columns as opposed to getting Q2 2009?
  15. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 13 Jul 2009 Link to this post

    Hello Tom,

    Unfortunately there is no workaround available prior to the Q2 2009 release of RadGrid for ASP.NET AJAX (2009.2.701). I suggest you migrate to it following the guidelines from here and test the functionality on this online demo:

    http://demos.telerik.com/aspnet-ajax/grid/examples/client/resizing/defaultcs.aspx (using the 'No wrap for cell content' configuration option)

    Kind regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  16. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 31 Jul 2009 Link to this post

    Hi

    Q2 2009 fixed my IE8 problem on my local server (mostly), but not the remote server, so I am wondering if the
    remote server is updated after all.

    I just uploaded the new dll to the remote server bin folder  - is that all I need to do, or is there something else
    to do to make it effective?

    Not sure what else to do - all the website stylesheets and pages are updated.

    Thanks for any pointers!

    Clive
  17. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 31 Jul 2009 Link to this post

    Well I have resolved the problem in a way ... It's the 'compatibility settings' in IE8 that are
    creating this issue as far as I am concerned.

    I am browsing with IE8, and had a problem with the Telerik upload button requiring multiple clicks.
    But then the problem went away by itself on one of my sites - IE had by itself added the published
     version of the site to its list of sites requiring 'compatibility settings' .    (find it in  tools > compatibility settings) .

    So I removed the site from this list - and Lo!   the problem of the column widths went away.

    So if you are seeing this problem and have Q2 2009 version of RadControls, check your site
    is not in the compatibility settings list.

    Of course I now have the upload button problem to solve...

    Hope this helps someone

    Clive
  18. Andrew Benson
    Andrew Benson avatar
    14 posts
    Member since:
    Jan 2005

    Posted 05 Oct 2009 Link to this post

    I'm having the same problem, and I'm using the latest version of RadControls

    I have a grid inside a RadSplitter. The splitter pane is Scrolling="None". I have the width of the grid, as well as every column (item and header) defined and the columns are getting squeezed despite this--ONLY IN IE8.

    Below is how I have the Grid set up:
    <telerik:radgrid   
     
    ID="RadGrid1"   
     
     
    runat="server"   
     
    AllowMultiRowSelection="True"   
     
    AllowPaging ="true"   
     
     
    AllowSorting="True"   
     
     
    AutoGenerateColumns="False"   
     
     
    DataSourceID="GridDataSource"   
     
     
    GridLines="None"   
     
     
    Pagesize="100"   
     
     
    Width="1408">   
     
     
       
     
     
    <HeaderContextMenu EnableEmbeddedSkins="False"></HeaderContextMenu>    
     
     
    <PagerStyle Visible="false" />   
     
     
    <ClientSettings>   
     
     
       
     
     
    <Selecting    
     
    AllowRowSelect="true"   
     
     
    EnableDragToSelectRows="false" />   
     
     
       
     
     
    <ClientEvents   
     
    OnGridCreated="GridCreated"   
     
    OnRowClick="RowClick"   
     
    OnRowCreated="RowCreated"   
     
    OnRowSelected="RowSelected"   
     
    OnRowDeselected="RowDeselected"   
     
    OnRowDblClick="RowDblClick"   
     
    OnRowContextMenu="RowContextMenu"   
     
    OnScroll="HandleScrolling" />   
     
       
     
    <Scrolling   
     
    SaveScrollPosition="True"   
     
    AllowScroll="true"   
     
    UseStaticHeaders="true" />   
     
     
    </ClientSettings> 
     
    <MasterTableView   
     
    AllowSorting="true"   
     
    DataKeyNames="ContentItemID,ContentTitle"   
     
    GridLines="None"   
     
    BorderWidth="0"   
     
    TableLayout="Fixed">  
    ...  
    </MasterTableView>   
     
     
     
    </telerik:radgrid>   
     
  19. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 06 Oct 2009 Link to this post

    Hello Andrew,

    The discrepancy you observed is indeed odd and from the provided details I cannot say for certain what might be the cause of it. Can you please provide a live url where the issue can be observed under IE 8 browser (using the 2009.2.826 release of the RadControls suite)? Thus I will do my best to advice you further.

    You may also use IE developer toolbar to inspect the rendered html of the grid and splitter pane as this may shed some additional light on the matter.

    Best regards,
    Sebastian
    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.
  20. Andrew Benson
    Andrew Benson avatar
    14 posts
    Member since:
    Jan 2005

    Posted 09 Oct 2009 Link to this post

    We don't have a live URL to share for this app., but I believe the problem is because the sum of the width of my cells is less than the width of the grid. I may have to set the width of the last column using JavaScript to make up the difference.

    -Andrew
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017