This is a migrated thread and some comments may be shown as answers.

Header and detail columns are misaligned

8 Answers 234 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 11 Aug 2010, 08:10 PM
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.

8 Answers, 1 is accepted

Sort by
0
Tom
Top achievements
Rank 1
answered on 11 Aug 2010, 08:17 PM
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?
0
Dimo
Telerik team
answered on 12 Aug 2010, 12:26 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Tom
Top achievements
Rank 1
answered on 12 Aug 2010, 04:22 PM

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>
0
Dimo
Telerik team
answered on 13 Aug 2010, 09:13 AM
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"
 
<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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Roland Klug
Top achievements
Rank 1
answered on 17 Sep 2010, 02:22 PM
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">
 
<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>

0
Dimo
Telerik team
answered on 17 Sep 2010, 02:33 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Jitendra
Top achievements
Rank 1
answered on 21 Jun 2019, 03:23 PM

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?

0
Dimo
Telerik team
answered on 24 Jun 2019, 06:44 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Tom
Top achievements
Rank 1
Answers by
Tom
Top achievements
Rank 1
Dimo
Telerik team
Roland Klug
Top achievements
Rank 1
Jitendra
Top achievements
Rank 1
Share this question
or