Header and detail columns are misaligned

7 posts, 0 answers
  1. Tom
    Tom avatar
    4 posts
    Member since:
    Jun 2010

    Posted 11 Aug 2010 Link to this post

    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.
  2. Tom
    Tom avatar
    4 posts
    Member since:
    Jun 2010

    Posted 11 Aug 2010 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Aug 2010 Link to this post

    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
  5. Tom
    Tom avatar
    4 posts
    Member since:
    Jun 2010

    Posted 12 Aug 2010 Link to this post

    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>
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Aug 2010 Link to this post

    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
  7. Roland Klug
    Roland Klug avatar
    26 posts
    Member since:
    Dec 2002

    Posted 17 Sep 2010 Link to this post

    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>

  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 17 Sep 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017