[Solved] IE8: Header column widths out of sync with Item column widths when icon added

[Software]

I've got a grid where one of the columns for each item adds an icon before the text of that column.  It seems that this pushes the width of all of the item columns out so that the item widths are not the same as the header widths.  I've managed to resolve this issue in IE6 & 7, but in IE8 I just can't get the column widths to sync up and I think there must be a better way to do this...  I've tried going in and changing the column widths when the browser is IE8, but it just never seems to sync up - once I get one column synced with it's header, another column is out of alignment...  Here's an example screenshot:

Grid Screenshot

Here's the aspx code:

<telerik:RadGrid ID="RadGrid1" EnableViewState="true" runat="server" AllowSorting="True"
    AutoGenerateColumns="false" Skin="WebBlue"
    ClientSettings-EnableRowHoverStyle="true" OnItemDataBound="RadGrid_ItemDataBound"
    Width="718px" Height="480px" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowPaging="false" PageSize="100" OnDataBound="rgResults_DataBound">
    <ClientSettings AllowColumnsReorder="False" EnablePostBackOnRowClick="True">
        <Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
        <Scrolling  AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <MasterTableView DataKeyNames="Id" ShowHeadersWhenNoRecords="false"
        VirtualItemCount="100" ItemStyle-Font-Size="11px"
        HeaderStyle-CssClass="gvHeader">
        <Columns>
            <telerik:GridClientSelectColumn ButtonType="PushButton" Visible="False" CommandName="Select" Text="Select" UniqueName="column">
            </telerik:GridClientSelectColumn>
            <telerik:GridTemplateColumn HeaderText="PIC" UniqueName="colPic">
                <HeaderStyle Width="27px" Font-Size="10px"/>
                <ItemStyle Width="27px" HorizontalAlign="center" />
                <ItemTemplate>
                    <img alt="face" id="face" src="imageProcessor.ashx?x=<%# Eval("ID") %>" width="30" height="38" style="border:0px;">
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="FLAGS" UniqueName="colFlags">
                <ItemStyle Width="40px" Wrap="false" Font-Size="10px"/>
                <HeaderStyle Width="40px" Font-Size="10px" />
                <ItemTemplate>
                    <asp:Label ID="lblAlerts" CssClass="flags" runat="server"></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="NAME" SortExpression="LastName"
                UniqueName="colName">
                <ItemTemplate>
                    <asp:ImageButton runat="server" ImageUrl="~/images/icons/zoom.png"
                        ImageAlign="AbsMiddle" AlternateText="Quick Summary" ID="targetControl" />
                        <%# Eval("LastName") + ", " + Eval("FirstName") + " " + Eval("MiddleName") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="ADDRESS"
                SortExpression="StreetAddress" UniqueName="colAddress">
                <HeaderStyle Width="160px" />
                <ItemStyle Width="160px" Wrap="True" />
                <ItemTemplate>
                    <%# Eval("StreetAddress") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn HeaderText="S" DataField="Sex" HeaderStyle-Wrap="false"
                UniqueName="colSex">
                <HeaderStyle Width="10px" />
                <ItemStyle Width="10px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="R" DataField="Race" HeaderStyle-Wrap="false"
                UniqueName="colRace">
                <HeaderStyle Width="10px" />
                <ItemStyle Width="10px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="HGT" DataField="Height" HeaderStyle-Wrap="false"
                HeaderStyle-Width="18px" ItemStyle-HorizontalAlign="center" UniqueName="colHeight">
                <HeaderStyle Width="18px" />
                <ItemStyle Width="18px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="WGT" DataField="Weight" UniqueName="colWeight">
                <HeaderStyle Width="20px" Wrap="false" />
                <ItemStyle Width="20px" HorizontalAlign="center"/>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="AGE" DataField="Age" UniqueName="colAge">
                <HeaderStyle Width="18px" Wrap="false" />
                <ItemStyle Width="18px" HorizontalAlign="center"/>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="DOB" DataField="Dob" AllowSorting="false"
                ItemStyle-HorizontalAlign="center" DataFormatString="{0:d}" UniqueName="colDob">
                <HeaderStyle Width="52px" />
                <ItemStyle Width="52px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="ID" DataField="Id" UniqueName="colId">
                <HeaderStyle Width="44px" />
                <ItemStyle Width="44px" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Here's the code to adjust column widths based on browser version:

protected void rgResults_DataBound(object sender, EventArgs e)
{
    if(bVersion < 8)
    {
        //PICS
        RadGrid1.Columns[1].HeaderStyle.Width = 40;
        RadGrid1.Columns[1].ItemStyle.Width = 40;
        //FLAGS
        RadGrid1.Columns[2].HeaderStyle.Width = 50;
        RadGrid1.Columns[2].ItemStyle.Width = 50;
        //SEX
        RadGrid1.Columns[5].HeaderStyle.Width = 20;
        RadGrid1.Columns[5].ItemStyle.Width = 20;
        //RACE
        RadGrid1.Columns[6].HeaderStyle.Width = 20;
        RadGrid1.Columns[6].ItemStyle.Width = 20;
        //HEIGHT
        RadGrid1.Columns[7].HeaderStyle.Width = 30;
        RadGrid1.Columns[7].ItemStyle.Width = 30;
        //WEIGHT
        RadGrid1.Columns[8].HeaderStyle.Width = 32;
        RadGrid1.Columns[8].ItemStyle.Width = 32;
        //AGE
        RadGrid1.Columns[9].HeaderStyle.Width = 30;
        RadGrid1.Columns[9].ItemStyle.Width = 30;
        //DOB
        RadGrid1.Columns[10].HeaderStyle.Width = 68;
        RadGrid1.Columns[10].ItemStyle.Width = 68;
        //ID
        RadGrid1.Columns[11].HeaderStyle.Width = 52;
        RadGrid1.Columns[11].ItemStyle.Width = 52;
    }
}

You can see that the only column I don't set specific widths for is the Name column.  I want that column to adjust it's width based on what's available.  I did try setting this specifically and couldn't get the columns to line up that way either...  I've checked the rest of my code for this page and there's no other manipulation of the column widths.  So if leave this code out I get column widths that are WAY too narrow for the content in IE6 & 7. 

Does anyone know of a better way of approaching this?

Thanks for the help!
Eddie

[Dimo]

Hello Eddie,

When you post a forum thread and a support ticket about the same thing, please notify us in the support thread. Thank you.

I did not manage to reproduce the misalignment locally. Judging by the screenshot, IE8 is in compatibility view or in quirks mode, but the grid control behaved as expected in all these modes and also in IE8 standards mode. Here is my test page. By the way, column widths should be set with HeaderStyle-Width only. No ItemStyle-Width.

I have not used the programmatic column width settings, as they are not needed.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int rowsNum = 30;
        string[][] colsInfo = {
        new string[] { "ID", "number" },
        new string[] { "LastName", "string" },
        new string[] { "FirstName", "string" },
        new string[] { "MiddleName", "string" },
        new string[] { "StreetAddress", "string" },
        new string[] { "Sex", "bool" },
        new string[] { "Race", "string" },
        new string[] { "Height", "number" },
        new string[] { "Weight", "number" },
        new string[] { "Age", "number" },
        new string[] { "DOB", "date" }
    };

        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>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" EnableViewState="true" runat="server" AllowSorting="True"
    AutoGenerateColumns="false" Skin="Web20"
    ClientSettings-EnableRowHoverStyle="true"
    Width="718px" Height="480px" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowPaging="false" PageSize="100">
    <ClientSettings AllowColumnsReorder="False" EnablePostBackOnRowClick="True">
        <Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
        <Scrolling  AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <MasterTableView DataKeyNames="Id" ShowHeadersWhenNoRecords="false"
        VirtualItemCount="100" ItemStyle-Font-Size="11px"
        HeaderStyle-CssClass="gvHeader">
        <Columns>
            <telerik:GridClientSelectColumn ButtonType="PushButton" Visible="False" CommandName="Select" Text="Select" UniqueName="column">
            </telerik:GridClientSelectColumn>
            <telerik:GridTemplateColumn HeaderText="PIC" UniqueName="colPic">
                <HeaderStyle Width="27px" Font-Size="10px"/>
                <ItemStyle HorizontalAlign="center" />
                <ItemTemplate>
                    <img alt="face" id="face" src="imageProcessor.ashx?x=<%# Eval("ID") %>" width="30" height="38" style="border:0px;">
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="FLAGS" UniqueName="colFlags">
                <ItemStyle Wrap="false" Font-Size="10px"/>
                <HeaderStyle Width="40px" Font-Size="10px" />
                <ItemTemplate>
                    <asp:Label ID="lblAlerts" CssClass="flags" runat="server"></asp:Label> &nbsp;
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="NAME" SortExpression="LastName"
                UniqueName="colName">
                <ItemTemplate>
                    <asp:ImageButton runat="server" ImageUrl="~/images/icons/zoom.png"
                        ImageAlign="AbsMiddle" AlternateText="Quick Summary" ID="targetControl" />
                        <%# Eval("LastName") + ", " + Eval("FirstName") + " " + Eval("MiddleName") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="ADDRESS"
                SortExpression="StreetAddress" UniqueName="colAddress">
                <HeaderStyle Width="160px" />
                <ItemStyle Wrap="True" />
                <ItemTemplate>
                    <%# Eval("StreetAddress") %>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn HeaderText="S" DataField="Sex" HeaderStyle-Wrap="false"
                UniqueName="colSex">
                <HeaderStyle Width="10px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="R" DataField="Race" HeaderStyle-Wrap="false"
                UniqueName="colRace">
                <HeaderStyle Width="10px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="HGT" DataField="Height" HeaderStyle-Wrap="false"
                ItemStyle-HorizontalAlign="center" UniqueName="colHeight">
                <HeaderStyle Width="18px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="WGT" DataField="Weight" UniqueName="colWeight">
                <HeaderStyle Width="20px" Wrap="false" />
                <ItemStyle HorizontalAlign="center"/>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="AGE" DataField="Age" UniqueName="colAge">
                <HeaderStyle Width="18px" Wrap="false" />
                <ItemStyle HorizontalAlign="center"/>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="DOB" DataField="Dob" AllowSorting="false"
                ItemStyle-HorizontalAlign="center" DataFormatString="{0:d}" UniqueName="colDob">
                <HeaderStyle Width="52px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="ID" DataField="Id" UniqueName="colId">
                <HeaderStyle Width="44px" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

</form>
</body>
</html>

Greetings,
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.