Header and detail columns are misaligned

[Tom]

I have code and telerik versions that are the same in my development and production environments and I am getting 2 different looking screens. The columns are not lined up at all.

Attached are the production and development screenshots.

This appears to be an IE issue. Firefox looks good.

[Tom]

After looking into it further, if I toggle the Compatability View settings, it seems to work in IE8. Is there a fix for this that is independent of compatability mode?

[Dimo]

Hello Tom,

Can you provide the RadGrid declaration? Make sure you are using only HeaderStyle-Width for column widths, not ItemStyle-Width.

Sincerely yours,
Dimo
the Telerik team

[Tom]

That didn't work...and I did have itemstyle-width's defined. I took them out and the same result...toggle compatability mode in IE8 and it will work fine in one mode and not the other.

<telerik:RadGrid ID="openorderdetails" runat="server"
        DataSourceID="ds_openorders" Skin="Vista" Height="450px" AllowSorting="True"
        ShowGroupPanel="True" AutoGenerateColumns="False" GridLines="None" Width="100%">
        <ExportSettings ExportOnlyData="true" Excel-FileExtension="xls" FileName="Open Order Details" Excel-Format="ExcelML" HideStructureColumns="true" Pdf-PageHeight="8.5in" Pdf-PageWidth="11in" Pdf-Title="Open Order Line Item Details"></ExportSettings>
        <MasterTableView Width="100%" ShowGroupFooter="true" TableLayout="Fixed">
            <Columns>
                <telerik:GridBoundColumn DataField="docid" HeaderText="Doc Type" HeaderStyle-Width="75px" ></telerik:GridBoundColumn>
                <telerik:GridHyperLinkColumn DataNavigateUrlFields="sopnumbe,soptype" DataNavigateUrlFormatString="/dialogs/OrderView.aspx?sopnumbe={0}&soptype={1}" DataTextField="sopnumbe" HeaderText="Order Number" HeaderStyle-Width="100px" target="_blank"></telerik:GridHyperLinkColumn>
                <telerik:GridBoundColumn DataField="cstponbr" HeaderText="Customer PO #" HeaderStyle-Width="100px" ></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="custname" HeaderText="Customer" HeaderStyle-Width="175px" ></telerik:GridBoundColumn>
                <telerik:GridHyperLinkColumn DataNavigateUrlFields="itemnmbr" DataNavigateUrlFormatString="/inventory/salesinventory.aspx?itemnmbr={0}&levelfilter=3,4&factorlevel=1" DataTextField="itemnmbr" HeaderText="Item" HeaderStyle-Width="100px" GroupByExpression="newitemnumber [Item Number], Sum(qtytoinv) qtytoinv [Qty to Invoice] Group By newitemnumber" Target="_blank"></telerik:GridHyperLinkColumn>
                <telerik:GridBoundColumn DataField="itemdesc" HeaderText="Item Description"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="reqshipdate" HeaderText="Ship Date" HeaderStyle-Width="75px" DataType="System.DateTime" DataFormatString="{0:d}"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="qtyorder" Aggregate="Sum" FooterAggregateFormatString="{0:N0}" HeaderText="Qty to Ord" HeaderStyle-Width="75px" DataType="System.Decimal" DataFormatString="{0:N0}"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="qtytoinv" Aggregate="Sum" FooterAggregateFormatString="{0:N0}" HeaderText="Qty to Inv" HeaderStyle-Width="75px" DataType="System.Decimal" DataFormatString="{0:N0}"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="qtytbaor" Aggregate="Sum" FooterAggregateFormatString="{0:N0}" HeaderText="Qty to Back" HeaderStyle-Width="75px" DataType="System.Decimal" DataFormatString="{0:N0}"></telerik:GridBoundColumn>
            </Columns>
            <GroupByExpressions>
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField FieldAlias="ReqShipDate" FieldName="ReqShipDate" FormatString="{0:D}" HeaderText="Ship Date" HeaderValueSeparator=" - "></telerik:GridGroupByField>
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="ReqShipDate"></telerik:GridGroupByField>
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
        </MasterTableView>
        <ClientSettings AllowGroupExpandCollapse="True" AllowDragToGroup="True">
            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
        </ClientSettings>
        <GroupingSettings ShowUnGroupButton="true" />
    </telerik:RadGrid>

[Dimo]

Hello Tom,

The provided code snippet works OK on my side and the columns are aligned properly in both IE8 and IE8 Compatibility mode. Here is my test page.

<%@ 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 = 10;
        string[][] colsInfo = {
        new string[] { "docid", "number" },
        new string[] { "sopnumbe", "number" },
        new string[] { "soptype", "number" },
        new string[] { "cstponbr", "number" },
        new string[] { "custname", "string" },
        new string[] { "itemnmbr", "number" },
        new string[] { "itemdesc", "string" },
        new string[] { "reqshipdate", "date" },
        new string[] { "qtyorder", "number" },
        new string[] { "qtytoinv", "number" },
        new string[] { "qtytbaor", "number" }
    };

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

<telerik:RadGrid ID="openorderdetails" runat="server" OnNeedDataSource="RadGrid_NeedDataSource"
    Skin="Vista" Height="450px" AllowSorting="True"
    ShowGroupPanel="True" AutoGenerateColumns="False" GridLines="None" Width="100%">
    <MasterTableView Width="100%" ShowGroupFooter="true" TableLayout="Fixed">
        <Columns>
            <telerik:GridBoundColumn DataField="docid" HeaderText="Doc Type" HeaderStyle-Width="75px" ></telerik:GridBoundColumn>
            <telerik:GridHyperLinkColumn DataNavigateUrlFields="sopnumbe,soptype" DataNavigateUrlFormatString="/dialogs/OrderView.aspx?sopnumbe={0}&soptype={1}" DataTextField="sopnumbe" HeaderText="Order Number" HeaderStyle-Width="100px" target="_blank"></telerik:GridHyperLinkColumn>
            <telerik:GridBoundColumn DataField="cstponbr" HeaderText="Customer PO #" HeaderStyle-Width="100px" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="custname" HeaderText="Customer" HeaderStyle-Width="175px" ></telerik:GridBoundColumn>
            <telerik:GridHyperLinkColumn DataNavigateUrlFields="itemnmbr" DataNavigateUrlFormatString="/inventory/salesinventory.aspx?itemnmbr={0}&levelfilter=3,4&factorlevel=1" DataTextField="itemnmbr" HeaderText="Item" HeaderStyle-Width="100px" GroupByExpression="newitemnumber [Item Number], Sum(qtytoinv) qtytoinv [Qty to Invoice] Group By newitemnumber" Target="_blank"></telerik:GridHyperLinkColumn>
            <telerik:GridBoundColumn DataField="itemdesc" HeaderText="Item Description"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="reqshipdate" HeaderText="Ship Date" HeaderStyle-Width="75px" DataType="System.DateTime" DataFormatString="{0:d}"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="qtyorder" Aggregate="Sum" FooterAggregateFormatString="{0:N0}" HeaderText="Qty to Ord" HeaderStyle-Width="75px" DataType="System.Decimal" DataFormatString="{0:N0}"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="qtytoinv" Aggregate="Sum" FooterAggregateFormatString="{0:N0}" HeaderText="Qty to Inv" HeaderStyle-Width="75px" DataType="System.Decimal" DataFormatString="{0:N0}"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="qtytbaor" Aggregate="Sum" FooterAggregateFormatString="{0:N0}" HeaderText="Qty to Back" HeaderStyle-Width="75px" DataType="System.Decimal" DataFormatString="{0:N0}"></telerik:GridBoundColumn>
        </Columns>
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField FieldAlias="ReqShipDate" FieldName="ReqShipDate" FormatString="{0:D}" HeaderText="Ship Date" HeaderValueSeparator=" - "></telerik:GridGroupByField>
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="ReqShipDate"></telerik:GridGroupByField>
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
    </MasterTableView>
    <ClientSettings AllowGroupExpandCollapse="True" AllowDragToGroup="True">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
    </ClientSettings>
    <GroupingSettings ShowUnGroupButton="true" />
</telerik:RadGrid>

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

Greetings,
Dimo
the Telerik team

[Roland Klug]

Dear Telerik Team,

I have a similar problem concerning grid header and column alignments as Tom described above.

Please take a look at the sample code below, which is based on the code you have provided. Using Telerik.Web.UI.dll version 2010.2.826.35 I get a wrong alignment in IE8 run in compatibility mode, i.e. the grid headers do not fit the coulmns. The headers fill 100% of the total grid width, whereas the columns only have the width defined by their corresponding "headerstyle-width" attribute. When not run in compatibility mode, everything looks fine, i.e. both the headers and the columns fill 100% of the total grid width.

Is this a bug in compatibilty mode or do I use the grid wrongly? I figured out that ommitting at least one of the "headerstyle-width" attributes would resolve the problem, but that would change the grid's behaviour slightly. What I want to achive is exactly the behaviour of the non-compatibility mode. Due to other reasons, it's currently not possible for me to disclaim the compatibility mode.

Thank you very much for your appreciated help!

Here's the sample code:

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

 <script runat="server">
     protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
     {
         var list = new List<object>();
         for (int i = 0; i < 10; ++i)
         {
             list.Add(new { a = "a", b = "b", c = "c", d = "d", e = "e" });
         }

         (sender as RadGrid).DataSource = list;
     }
</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 id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="openorderdetails" runat="server" OnNeedDataSource="RadGrid_NeedDataSource"
    Height="450px" AllowSorting="True" ShowGroupPanel="True" AutoGenerateColumns="False" GridLines="Both" Width="100%">
    <MasterTableView ShowGroupFooter="true" Width="100%">
        <Columns>
            <telerik:GridBoundColumn DataField="a" HeaderText="A" HeaderStyle-Width="75px" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="b" HeaderText="B" HeaderStyle-Width="100px" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="c" HeaderText="C" HeaderStyle-Width="175px" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="d" HeaderText="D" HeaderStyle-Width="250px" ></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="e" HeaderText="E" HeaderStyle-Width="75px" ></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowGroupExpandCollapse="True" AllowDragToGroup="True" AllowColumnsReorder="true">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
                    <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" />
    </ClientSettings>
    <GroupingSettings ShowUnGroupButton="true" />
</telerik:RadGrid>

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

[Dimo]

Hi Roland,

Please remove Width="100%" from the MasterTableView tag. It should not be used together with Fixed TableLayout (as in your case when using static headers and column widths)

Greetings,
Dimo
the Telerik team

[Jitendra]

Dear telerik, 

I have the same issue of misalignment of header with column data and it is more visible in google chrome as compared to  internet explorer. I have tried the above given suggestion of table layoyt:fixed. but it doesn't work. 

We are using kendo for asp.net mvc.  We have few statics column and dynamic column based on selections made by user. Static column are working fine but dynamic have misalignment problem.

Can you help me in this?

[Dimo]

Hello Jitendra,

This is the UI for ASP.NET AJAX forum. If you are using UI for ASP.NET MVC or Kendo UI, please post in the correct forum, because the HTML rendering and the APIs of the Kendo UI (MVC) Grids are different from the AJAX one.

Kendo UI Grid
https://www.telerik.com/forums/kendo-ui/grid

Grid for ASP.NET MVC 
https://www.telerik.com/forums/aspnet-mvc/grid

Regards,
Dimo
Progress Telerik