Column Width Wrong in IE8 and Overlapping Hyperlinks

[Levi]

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

[Dimo]

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.

[Ulrich Ruffiner]

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.

[Dimo]

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.

[Levi]

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.

[Dimo]

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.

[Morten Bomholt]

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 ?

 

[Dimo]

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.

[Levi]

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.

[Stephen]

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

[Stephen]

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. 

[Dimo]

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.

[Tom Molloy]

Is there any workaround for these overlapping columns as opposed to getting Q2 2009?

[Sebastian]

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.

[Clive Hoggar]

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

[Clive Hoggar]

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

[Andrew Benson]

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>

[Sebastian]

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.

[Andrew Benson]

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