Grid Header Alignment Problem While Fixed Header

[Anoop]

Hi,

I'm facing grid header alignment problem only when I'm manking "UseStaticHeaders = true" for Grid ClientSetting.Scrolling, I'm using the Office2007 skin.

I'm creating grid columns dynamicaaly through code seeting it's width as given below;

                    GridBoundColumn bfield = new GridBoundColumn();
                    bfield.DataField = "Col1";
                    bfield.HeaderText = "Col1";
                    bfield.HeaderStyle.Width = 70;
                    bfield.HtmlEncode = false;

                    grdEngagements.MasterTableView.Columns.Add(bfield);
I'm giving the coloum width only for other coloumns than the first coloumn (not given any coloumn width for first coloumn) and I'm not doing anything in MasterTableView.TableView in code or design.

Below is the attached pic where I'm getting coloumn reallignment issue, I have found the same issue mensioned in some telerik blogs but none of those solutions fixed my issue,

Please help me to resolve it as sooon as possible, Thanks in advance,

Anoop

[Princy]

Hello Anoop,

I have tried to reproduce the issue but no avail. Here is the sample code.

C#:

protected void Page_Init(object sender, EventArgs e)
{
        PlaceHolder PlaceHolder1 = new PlaceHolder();
        RadGrid RadGrid1 = new RadGrid();
        RadGrid1.ID = "RadGrid1";
        RadGrid1.Skin = "Office2007";
        form1.Controls.Add(PlaceHolder1);
        form1.Controls.Add(RadGrid1);
        RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
        RadGrid1.PageSize = 15;
        RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;
        RadGrid1.AllowPaging = true;
        RadGrid1.AutoGenerateColumns = false;
        RadGrid1.DataSourceID = "SqlDataSource1";
        RadGrid1.MasterTableView.DataKeyNames = new string[] { "OrderID" };
        GridBoundColumn boundColumn = new GridBoundColumn();
        boundColumn.DataField = "OrderID";
        boundColumn.HeaderText = "OrderID";
        boundColumn.HeaderStyle.Width = 70;
        boundColumn.HtmlEncode = false;
        RadGrid1.MasterTableView.Columns.Add(boundColumn);
        boundColumn = new GridBoundColumn();
        boundColumn.DataField = "ProductID";
        boundColumn.HeaderText = "ProductID";
        boundColumn.HeaderStyle.Width = 70;
        boundColumn.HtmlEncode = false;
        RadGrid1.MasterTableView.Columns.Add(boundColumn);
        boundColumn = new GridBoundColumn();
        boundColumn.DataField = "UnitPrice";
        boundColumn.HeaderText = "UnitPrice";
        boundColumn.HeaderStyle.Width = 70;
        boundColumn.HtmlEncode = false;
        RadGrid1.MasterTableView.Columns.Add(boundColumn);
        boundColumn = new GridBoundColumn();
        boundColumn.DataField = "Quantity";
        boundColumn.HeaderText = "Quantity";
        boundColumn.HeaderStyle.Width = 70;
        boundColumn.HtmlEncode = false;
        RadGrid1.MasterTableView.Columns.Add(boundColumn);
        GridGroupByExpression exp = new GridGroupByExpression();
        GridGroupByField expfield = new GridGroupByField();
        expfield = new GridGroupByField();
        expfield.FieldName = "OrderID";
        expfield.HeaderText = "Order count ";
        expfield.Aggregate = GridAggregateFunction.Count;
        exp.SelectFields.Add(expfield);
        expfield = new GridGroupByField();
        expfield.FieldName = "UnitPrice";
        exp.GroupByFields.Add(expfield);
        RadGrid1.MasterTableView.GroupByExpressions.Add(exp);
}

Thanks,
Princy.

[Anoop]

Hi Princy,

Could please check the below code, I have created a small website project where the problem exist, but when in this case the the grid header is not much misalligned compare to the previuos question I have attached a screen shot which was a SharePoint project.

///////////////////////////////// Default.aspx page code ////////////////////////////////

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="BuildGrid._Default" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2011.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<table id="tblEngagements" style="width: 100%; table-layout: fixed;">
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
            <form runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableHandlerDetection="false">
            </telerik:RadScriptManager>
            <div class="myClass">
                <telerik:RadGrid ID="grdEngagements" runat="server" AllowPaging="false" GridLines="Both"
                    GroupingEnabled="true" ShowStatusBar="true" AutoGenerateColumns="false" OnItemDataBound="grdEngagements_ItemDataBound">
                </telerik:RadGrid>
            </div>
        </td>
        </form>
    </tr>
</table>

///////////////////////////////// Default.aspx page code ends ////////////////////////////////

///////////////////////////////// Default.aspx.cs page code ////////////////////////////////

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data;
using System.Collections;

namespace BuildGrid
{
    public partial class _Default : System.Web.UI.Page
    {
        private MergedColumnsInfo info = new MergedColumnsInfo();

        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                DataTable dtDummy = new DataTable();
                dtDummy.Columns.Add("GroupCol");
                dtDummy.Columns.Add("MainCol3");
                dtDummy.Columns.Add("SubCol11");
                dtDummy.Columns.Add("SubCol12");
                dtDummy.Columns.Add("SubCol21");
                dtDummy.Columns.Add("SubCol22");
                dtDummy.Columns.Add("SubCol23");

                for (int i = 0; i < 10; i++)
                {
                    DataRow drNew = dtDummy.NewRow();

                    if (i == 0 || i == 1 || i == 2)
                        drNew[0] = 1;
                    else if (i == 3 || i == 4 || i == 5)
                        drNew[0] = 2;
                    else if (i == 7 || i == 8 || i == 9 || i == 6)
                        drNew[0] = 3;

                    drNew[1] = i.ToString() + "1";
                    drNew[2] = i.ToString() + "2";
                    drNew[3] = i.ToString() + "3";
                    drNew[4] = i.ToString() + "4";
                    drNew[5] = i.ToString() + "5";
                    drNew[6] = i.ToString() + "6";
                    dtDummy.Rows.Add(drNew);
                }

                string[,] fieldNames = new string[1, 2];

                foreach (DataColumn drPref in dtDummy.Columns)
                {
                    switch (drPref.ColumnName)
                    {
                        case "SubCol11":
                            fieldNames = new string[2, 2];
                            fieldNames[0, 0] = "SubCol11";
                            fieldNames[0, 1] = "SubCol11";
                            fieldNames[1, 0] = "SubCol12";
                            fieldNames[1, 1] = "SubCol12";
                            CreateBoundField(ref fieldNames, "tbl_alg_right", "", 100, true);
                            break;
                        case "SubCol21":
                            fieldNames = new string[3, 2];
                            fieldNames[0, 0] = "SubCol21";
                            fieldNames[0, 1] = "SubCol21";
                            fieldNames[1, 0] = "SubCol22";
                            fieldNames[1, 1] = "SubCol22";
                            fieldNames[2, 0] = "SubCol23";
                            fieldNames[2, 1] = "SubCol23";
                            CreateBoundField(ref fieldNames, "tbl_alg_right", "", 100, true);
                            break;
                        case "MainCol3":
                            fieldNames = new string[1, 2];
                            fieldNames[0, 0] = "MainCol3";
                            fieldNames[0, 1] = "MainCol3";
                            CreateBoundField(ref fieldNames, "tbl_alg_right", "", 0, true);
                            break;
                    }
                }

                // Registering the grid view columns to merge.
                for (int rowIndex = 0; rowIndex < grdEngagements.Columns.Count; rowIndex++)
                {
                    switch (grdEngagements.Columns[rowIndex].HeaderText)
                    {
                        case "SubCol11":
                            info.AddMergedColumns(new int[] { rowIndex + 3, ++rowIndex + 3 }, "MainCol1");
                            break;
                        case "SubCol21":
                            info.AddMergedColumns(new int[] { rowIndex + 3, ++rowIndex + 3, ++rowIndex + 3 }, "MainCol2");
                            break;
                    }
                }

                // Binding the grid.

                grdEngagements.GridLines = GridLines.Vertical;
                grdEngagements.ClientSettings.Scrolling.AllowScroll = true;
                grdEngagements.ClientSettings.Scrolling.UseStaticHeaders = true;
                grdEngagements.ClientSettings.Scrolling.SaveScrollPosition = true;

                grdEngagements.MasterTableView.Width = Unit.Percentage(100);
                grdEngagements.MasterTableView.TableLayout = GridTableLayout.Auto;
                grdEngagements.AllowPaging = false;
                grdEngagements.AutoGenerateColumns = false;
                grdEngagements.GroupingEnabled = true;
                grdEngagements.ShowGroupPanel = false;
                grdEngagements.ShowStatusBar = true;
                grdEngagements.Skin = "Office2007";

                GridGroupByField field = new GridGroupByField();
                field.FieldName = "GroupCol";
                field.HeaderText = "GroupCol";
                GridGroupByExpression ex = new GridGroupByExpression();
                ex.GroupByFields.Add(field);
                ex.SelectFields.Add(field);

                grdEngagements.MasterTableView.GroupByExpressions.Add(ex);
                grdEngagements.ClientSettings.AllowGroupExpandCollapse = true;
                grdEngagements.MasterTableView.GroupLoadMode = GridGroupLoadMode.Client;

                grdEngagements.MasterTableView.DataSource = dtDummy;
                grdEngagements.DataBind();

            }
            catch (Exception ex)
            {
                ex.Message.ToString();
            }
        }

        protected void grdEngagements_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.Header)
                e.Item.SetRenderMethodDelegate(RenderHeader);
        }

        #region RenderHeader
        /// <summary>
        /// Method to render the grid header.
        /// </summary>
        /// <param name="output"> HtmlTextWriter output. </param>
        /// <param name="container"> Control. </param>
        private void RenderHeader(HtmlTextWriter output, Control container)
        {
            try
            {
                for (int i = 0; i < container.Controls.Count; i++)
                {
                    TableCell cell = (TableCell)container.Controls[i];

                    // Stretch non merged columns for two rows.
                    if (!info.MergedColumns.Contains(i))
                    {
                        cell.Attributes["rowspan"] = "2";
                        cell.RenderControl(output);
                    }
                    else if (info.StartColumns.Contains(i)) // Render merged columns common title.
                    {
                        output.Write(string.Format("<th colspan='{0}'>{1}</th>", info.StartColumns[i], info.Titles[i]));
                    }
                }

                // Close the first row.
                output.RenderEndTag();

                // Set attributes for the second row.
                grdEngagements.HeaderStyle.AddAttributesToRender(output);

                // Start the second row.
                output.AddStyleAttribute("text-align", "center");
                output.RenderBeginTag("tr");

                // Render the second row (only the merged columns).
                for (int i = 0; i < info.MergedColumns.Count; i++)
                {
                    TableCell cell = (TableCell)container.Controls[info.MergedColumns[i]];
                    cell.RenderControl(output);
                }
            }
            catch (Exception ex)
            {
                ex.Message.ToString();
            }
        }
        #endregion

        #region CreateBoundField
        /// <summary>
        /// Method to create bound fields for the grid view and applying style for each column.
        /// </summary>
        /// <param name="fieldNames"> Rad grid column data field and header text. </param>
        /// <param name="itemStyleCss"> Css class name of the rad grid coloumn item. </param>
        /// <param name="headerStyleCss"> Cssclass name of the rad grid coloumn header. </param>
        /// <param name="colWidth"> Rad grid coloumn width. </param>
        /// <param name="isDigit"> Is the rad grid coloumn is of integer type (this is to format the values). </param>
        private void CreateBoundField(ref string[,] fieldNames, string itemStyleCss, string headerStyleCss, int colWidth, bool isDigit)
        {
            try
            {
                for (int indx = 0; indx < (fieldNames.Length / 2); indx++)
                {
                    GridBoundColumn bfield = new GridBoundColumn();
                    bfield.DataField = fieldNames[indx, 0];
                    bfield.HeaderText = fieldNames[indx, 1];

                    if (colWidth != 0)
                    {
                        bfield.HeaderStyle.Width = colWidth;
                    }

                    bfield.HtmlEncode = false;

                    // Formatting if the coloumn is of int type.
                    if (isDigit)
                        bfield.DataFormatString = "{0:#,##0.##;(#,##0.##)}";

                    grdEngagements.MasterTableView.Columns.Add(bfield);
                }
            }
            catch (Exception ex)
            {
                ex.Message.ToString();
            }
        }
        #endregion
    }

    #region MergedColumnsInfo
    /// <summary>
    /// Class to register the merge coloumns in grid view.
    /// </summary>
    public class MergedColumnsInfo
    {
        #region Fields
        // Indexes of merged columns.
        public List<int> MergedColumns = new List<int>();

        // Key-value pairs: key = the first column index, value = number of the merged columns.
        public Hashtable StartColumns = new Hashtable();

        // Key-value pairs: key = the first column index, value = common title of the merged columns.
        public Hashtable Titles = new Hashtable();
        #endregion

        #region AddMergedColumns
        /// <summary>
        /// Method to register the merge coloumns in grid view.
        /// </summary>
        /// <param name="columnsIndexes"> The merged columns indexes. </param>
        /// <param name="title"> Common title of the merged columns. </param>
        public void AddMergedColumns(int[] columnsIndexes, string title)
        {
            try
            {
                MergedColumns.AddRange(columnsIndexes);
                StartColumns.Add(columnsIndexes[0], columnsIndexes.Length);
                Titles.Add(columnsIndexes[0], title);
            }
            catch (Exception ex)
            {
                ex.Message.ToString();
            }
        }
        #endregion
    }
    #endregion
}
   

///////////////////////////////// Default.aspx page code ends ////////////////////////////////



Thanks,
Anoop

[Pavlina]

Hello Anoop,

To resolve the described problem you can try setting TableLayout property for the MasterTableView  to Fixed and remove the MasterTableView width:

grdEngagements.MasterTableView.TableLayout = GridTableLayout.Fixed;

Give this suggestion a try and let me know how it goes.

Greetings,
Pavlina
the Telerik team

[Anoop]

I have tried that, but no chance :-(
I think it is some problem related with padding of header, when Im collapsing all the groups the scroll bar dissappeares on that time it is alligned properly, I think the sroll bar width is pushing the master table towards left.

Thanks,
Anoop

[Pavlina]

Hi Anoop,

I suppose that the approach presented in the knowledge base below might help:
http://www.telerik.com/support/kb/aspnet-ajax/grid/how-to-align-radgrid-cells-when-using-scrolling-and-gridlines.aspx

It shows how to make the cells align properly when GridLines are turned on.

All the best,
Pavlina
the Telerik team

[Ammar]

It seems that when you set the UseStaticHeaders in the scrolling to true the header doesn’t get aligned properly when the window is resized. I think it is an issue of refresh because when you maximize the window you see the header take the length of the old window size here is the grid code I’m using please let me know if you have a fix for that.  

<telerik:RadGrid ID="RadGrid1" runat="server" Width="95%" 

            CellSpacing="0" GridLines="None" OnPageSizeChanged="Refresh">

            <HeaderStyle Width="33%" />

          <PagerStyle Mode="NumericPages" />

            <MasterTableView TableLayout="Fixed">

                <CommandItemSettings ExportToPdfText="Export to PDF" />

                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

                </RowIndicatorColumn>

                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

                </ExpandCollapseColumn>

                <EditFormSettings>

                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">

                    </EditColumn>

                </EditFormSettings>

            </MasterTableView>

                <ClientSettings>

                <Resizing AllowColumnResize="true" ClipCellContentOnResize="False"

                    EnableRealTimeResize="True" ShowRowIndicatorColumn="False" />

                <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1"/>

               

            </ClientSettings>

 

             <FilterMenu EnableImageSprites="False">

            </FilterMenu>

            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

            </HeaderContextMenu>

 

             </telerik:RadGrid>

[Pavlina]

Hi Ammar,

I tried to replicate the described problem but to no avail. I have attached my test page which I prepared based on the provided code. Give it a try and let me know what is the difference in your case.

Greetings,
Pavlina
the Telerik team

[Simone]

I am having the same problem here when I use it inside a RadWindow. It works fine if I open the page in the browser. I'm trying to figure out what's causing it.

Well the problem has something to do with ShowContentDuringLoad, it was set to "false"

If I set it to "true", then it works fine, the header columns and the item columns are properly aligned. Go figure.

Still it seems like a bug that needs to be fixed. I prefer not to have the content to be seen when loading the window.

 <telerik:RadWindow ID="wndPrograms" runat="server" Behaviors="Close,Resize,Move" OnClientBeforeClose="OnClientBeforeClose" 
        ReloadOnShow="true" ShowContentDuringLoad="true" Width="650" Height="800">

        function OnClientBeforeClose(oWnd, args) {
            alert('OnClientBeforeClose');
            //Fires when user presses X
            var arg = oWnd.argument;
            if ((arg != "Cancel") && (arg != null)) {
                refreshScreen(arg);
            }
            oWnd.SetUrl("about:blank");
        }

[Pavlina]

Hello Simone,

Please note that when the grid is initially invisible on the page you need to call the repaint() client-side method to RadGrid once it becomes visible.
http://www.telerik.com/help/aspnet-ajax/grid-repaint.html

Give it a try and let me know about the result.

Greetings,
Pavlina
the Telerik team

[Evgeny Vdovin]

 

I had similar issue and it took a little bit of time to fix :)
Open up developers tools (f12) and check browser mode. My one was IE9 Compatibility mode by switching to IE 9 fixed the issue,

[SUNIL]

This is an old post, but I thought I would post how I solved a similar problem when using 2011 Q2 Release.

I had static headers set to true and all visible columns had pixel widths. But I was getting the column values not aligned with their headers. This was happening in IE 8 and latest FireFox 19.0.
Strangely, when displaying in IE 8 in compatibility view, the problem went away.

You could do one of the following approaches to solving this problem.

Approach 1:
I found that if I set static headers to false then the alignment problem went away.


Approach 2:
The solution, when static headers is true, involves making sure that these 2 changes are made:

1. TableLayout = "Fixed"
2. Give pixel widths ( I mean headerstyle width only for each visible column)  to all visible columns except the last one.

Another recommendation, though this is NOT required for above solution to work, is to always include the meta tag that forces latest IE to be used rather than compatibility view mode. Just insert a tag like below in your header section of the page.

<head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
    </head>

Sunil

[Pavlina]

Hi Sunil,

Thank you for sharing your solution with the community. I am sure it would be useful for other members who encountered a similar problem.

Greetings,
Pavlina
the Telerik team

[Kapil]

if you do not give the headerstyle width to last column it gets hidden.

[Kiran]

Sunil, yes, the Approach 2 works just as expected. But, can we make this work with the widths set up in percentages?

Regards,
Kiran

[Onkaramurthy]

Radgrid header alignment is not properly aligned with columns, Please any once help me to sort out this issue,

Please find the attached screen shot below,

[Pavlina]

Hello,

Could you confirm that you are using the latest version of Telerik UI for ASP.NET AJAX and HeaderStyle-Width for the columns is set?

Regards,
Pavlina
Telerik

[Onkaramurthy]

Thanks for your fast reply,

We used 2013 Telerik Version(2013.3.1203.35),

And also i tired with 2015 Telerik Version(2015.2.623.40) But No use Same Issue,

Thanks

Onkar,

 

 

 

 

[Pavlina]

Hello,

In case the problem persists with the latest version as well I will ask you to provide the grid declaration so we can test it locally and provide more to the point answer. Otherwise it would be difficult to say why header is not properly aligned with columns. Also specify which is the browser you are using.

Regards,
Pavlina
Telerik

[Onkaramurthy]

We are using IE Browser, Version :- (11.0.9600.17107)

Please find the below mentioned grid declaration code,

                <telerik:RadGrid ID="RGForecastData" runat="server" Skin="Office2007" GridLines="None"
                    AllowFilteringByColumn="false" AllowPaging="false" AllowSorting="True" Width="100%"
                    AutoGenerateColumns="False" ShowFooter="true" ShowStatusBar="true" AllowAutomaticUpdates="False"
                    HorizontalAlign="NotSet" OnNeedDataSource="RGForecastData_NeedDataSource" ShowHeader="true">
                    <MasterTableView CommandItemDisplay="None" EditMode="PopUp" TableLayout="Fixed">
                        <ColumnGroups>
                            <telerik:GridColumnGroup Name="FSD" HeaderText="FSD" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Oil" HeaderText="Oil Production" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Gas" HeaderText="Gas Production" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Ngl" HeaderText="NGL Production" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Total" HeaderText="Total Production" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Oil_Revenue" HeaderText="Oil Revenue" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Gas_Revenue" HeaderText="Gas Revenue" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Ngl_Revenue" HeaderText="NGL Revenue" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Total_Revenue" HeaderText="Total Revenue" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Price" HeaderText="Price" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="CAPEX" HeaderText="CAPEX" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="OPEX" HeaderText="OPEX" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Cashflow" HeaderText="Cashflow" HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Daily_Oil" HeaderText="Oil Daily Rate"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Daily_Gas" HeaderText="Gas Daily Rate"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Production_Daily_Ngl" HeaderText="NGL Daily Rate"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridColumnGroup Name="Total_Daily_Prod" HeaderText="Total Daily Rate" HeaderStyle-HorizontalAlign="Center" />
                        </ColumnGroups>
                        <Columns>
                            <telerik:GridBoundColumn UniqueName="un_WellName" HeaderText="Well Name" DataField="WellName" HeaderStyle-Width="100px"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridBoundColumn UniqueName="un_Propnum" HeaderText="Propnum" DataField="Propnum" HeaderStyle-Width="40px"
                                HeaderStyle-HorizontalAlign="Center" />
                            <telerik:GridBoundColumn UniqueName="un_Fsd_S" HeaderText="Original" DataField="Fsd_S" HeaderStyle-Width="35px"
                                ColumnGroupName="FSD" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:d}" />
                            <telerik:GridBoundColumn UniqueName="un_Fsd_B" HeaderText="Modified" DataField="Fsd_B"
                                ColumnGroupName="FSD" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:d}" HeaderStyle-Width="35px" />
                            <telerik:GridBoundColumn UniqueName="un_Oil_S" HeaderText="Original" DataField="Oil_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Oil" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Oil_B" HeaderText="Modified" DataField="Oil_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Oil" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Gas_S" HeaderText="Original" DataField="Gas_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Gas" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Gas_B" HeaderText="Modified" DataField="Gas_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Gas" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Ngl_S" HeaderText="Original" DataField="Ngl_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Ngl" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Ngl_B" HeaderText="Modified" DataField="Ngl_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Ngl" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Prod_Total_S" HeaderText="Original" DataField="Prod_Total_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Total" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Prod_Total_B" HeaderText="Modified" DataField="Prod_Total_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Total" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Prod_Total_V" HeaderText="Variance" DataField="Prod_Total_V" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Total" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OilRevenue_S" HeaderText="Original" DataField="OilRevenue_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Oil_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OilRevenue_B" HeaderText="Modified" DataField="OilRevenue_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Oil_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_GasRevenue_S" HeaderText="Original" DataField="GasRevenue_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Gas_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_GasRevenue_B" HeaderText="Modified" DataField="GasRevenue_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Gas_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_NglRevenue_S" HeaderText="Original" DataField="NglRevenue_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Ngl_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_NglRevenue_B" HeaderText="Modified" DataField="NglRevenue_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Ngl_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OilPrice" HeaderText="Oil" DataField="OilPrice" HeaderStyle-Width="30px"
                                ColumnGroupName="Price" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C}" ItemStyle-HorizontalAlign="Right" Aggregate="Avg" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_GasPrice" HeaderText="Gas" DataField="GasPrice" HeaderStyle-Width="30px"
                                ColumnGroupName="Price" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C}" ItemStyle-HorizontalAlign="Right" Aggregate="Avg" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_NglPrice" HeaderText="NGL" DataField="NglPrice" HeaderStyle-Width="30px"
                                ColumnGroupName="Price" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C}" ItemStyle-HorizontalAlign="Right" Aggregate="Avg" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_TotalRevenue_S" HeaderText="Original" DataField="TotalRevenue_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Total_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_TotalRevenue_B" HeaderText="Modified" DataField="TotalRevenue_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Total_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_TotalRevenue_V" HeaderText="Variance" DataField="TotalRevenue_V" HeaderStyle-Width="30px"
                                ColumnGroupName="Total_Revenue" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_CAPEX_S" HeaderText="Original" DataField="CAPEX_S" HeaderStyle-Width="30px"
                                ColumnGroupName="CAPEX" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_CAPEX_B" HeaderText="Modified" DataField="CAPEX_B" HeaderStyle-Width="30px"
                                ColumnGroupName="CAPEX" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_CAPEX_V" HeaderText="Variance" DataField="CAPEX_V" HeaderStyle-Width="30px"
                                ColumnGroupName="CAPEX" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OPEX_S" HeaderText="Original" DataField="OPEX_S" HeaderStyle-Width="30px"
                                ColumnGroupName="OPEX" Display="false" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:C0}"
                                ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OPEX_B" HeaderText="Modified" DataField="OPEX_B" HeaderStyle-Width="30px"
                                ColumnGroupName="OPEX" Display="false" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:C0}"
                                ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OPEX_V" HeaderText="Variance" DataField="OPEX_V" HeaderStyle-Width="30px"
                                ColumnGroupName="OPEX" Display="false" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0:C0}"
                                ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Cashflow_S" HeaderText="Original" DataField="NetCashflow_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Cashflow" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Cashflow_B" HeaderText="Modified" DataField="NetCashflow_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Cashflow" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_Cashflow_V" HeaderText="Variance" DataField="NetCashflow_V" HeaderStyle-Width="30px"
                                ColumnGroupName="Cashflow" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:C0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OilProdDaily_S" HeaderText="Original" DataField="Daily_Oil_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Daily_Oil" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_OilProdDaily_B" HeaderText="Modified" DataField="Daily_Oil_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Daily_Oil" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_GasProdDaily_S" HeaderText="Original" DataField="Daily_Gas_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Daily_Gas" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_GasProdDaily_B" HeaderText="Modified" DataField="Daily_Gas_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Daily_Gas" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_NglProdDaily_S" HeaderText="Original" DataField="Daily_Ngl_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Daily_Ngl" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_NglProdDaily_B" HeaderText="Modified" DataField="Daily_Ngl_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Production_Daily_Ngl" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_TotalProdDaily_S" HeaderText="Original" DataField="TotalDailyProd_S" HeaderStyle-Width="30px"
                                ColumnGroupName="Total_Daily_Prod" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_TotalProdDaily_B" HeaderText="Modified" DataField="TotalDailyProd_B" HeaderStyle-Width="30px"
                                ColumnGroupName="Total_Daily_Prod" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                            <telerik:GridBoundColumn UniqueName="un_TotalProdDaily_V" HeaderText="Variance" DataField="TotalDailyProd_V" HeaderStyle-Width="30px"
                                ColumnGroupName="Total_Daily_Prod" Display="false" HeaderStyle-HorizontalAlign="Center"
                                DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" Aggregate="Sum" FooterStyle-HorizontalAlign="Right" />
                        </Columns>
                    </MasterTableView>
                    <GroupingSettings CaseSensitive="false" />
                    <ClientSettings>
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                        <ClientEvents OnGridCreated="GridCreated" />
                    </ClientSettings>

                </telerik:RadGrid>

Thanks

Onkar,

[Pavlina]

Hello,

I took the provided code and prepared a sample runnable project based on it, however I was not able to observe the alignment issue. I have attached my test page for your reference.

Regards,
Pavlina
Telerik

[Alejandro Espina]

What we found is that Telerik generated a wrong inline style in the header division, the correct value should be margin-right:16px, but in versions earlier than 2018.1, it gives 17px,  version 2018.1 got the right value of 16px, but in version 2019.2 it is back to 17px.

The "source" where the style was defined can be seen from the attached.

I hope this issue to be fixed in Telerik, instead apply workarounds,

Thanks.

[Attila Antal]

Hi Alejandro,

Back in the days there were only workarounds, however, many issues have been fixed in later versions. Since then, we have updated our documentations as well, so that it will contain the information that could help avoid many of the appearance problems. 

There are two major articles that we are keep reminding to our users, one of which is in case Internet Explorer is used and is about ensuring the IE settings correspond to the recommended settings: Different appearance or behavior in Internet Explorer on local and production servers

Second article is addressing the misaligned column headers. This issue usually happens when Scrolling is enabled and Static headers are used: Misaligned Columns in RadGrid with Scrolling Enabled

If the application corresponds to the recommended settings mentioned above and it still has display issues, we kindly ask for the steps to replicate the problem. Once we can replicate the problem we would be able to determine whether this is a bug or is a configuration issue and apply the changes accordingly.

Kind regards,
Attila Antal
Progress Telerik

[Carlos]

Hello,

I guess this issue has not been resolved.  Using ASP.NET Ajax 2022 r1. I tried the suggestions from Misaligned Columns in RadGrid with Scrolling Enabled. Can someone help? 

 

[Attila Antal]

Hi Carlos,

Can you please share the Grid markup and its related C#/VB from the CodeBehind file so that we can understand how it was configured? We will try to replicate the problem and only then we will be able to share a better answer.

[Carlos]

Hi Attila,

I finally got it working.   I used Percentages for the header-style width which was splitting the columns in equal parts no matter what percentages I used in the different columns.   When I use px , the misalignment disappears.  See last illustration.  The Percentage issue needs to be addressed.

               <NestedViewTemplate>
                        <div id="divTestDetail">
                                 <telerik:RadGrid ID="rgSampleTests" HeaderStyle-Width="100%"   runat="server" RenderMode="Lightweight"   Skin="Metro" OnNeedDataSource="rgSampleTests_NeedDataSource"   AllowSorting="True" AutoGenerateColumns="False" CellSpacing="-1" GridLines="Both" Height="300" Width="65%" DataKeyNames="Guid_ClientStdOrderID, Guid_ClientID, Guid_ItemID, Duration_from, Duration_To ">
                                    <ClientSettings>
                                        <Scrolling AllowScroll="true"  UseStaticHeaders="true"  />
                                           <Resizing AllowColumnResize="True" AllowRowResize="True" EnableRealTimeResize="True" />  
                                        </ClientSettings>
                                    <GroupingSettings CollapseAllTooltip="Collapse all groups" />
                                    <MasterTableView  AllowSorting="True"  EnableLinqGrouping="False"  GroupsDefaultExpanded="False" HeaderStyle-Width="100%"  TableLayout="Fixed"  ShowFooter="true" AllowScroll="true" UseStaticHeaders="True"  >
                                         <RowIndicatorColumn Visible="False">
                                        </RowIndicatorColumn>
                                        <Columns>
                                              <telerik:GridBoundColumn Aggregate="Count" FooterText="Total ITems Received: " DataField="Txt_MdlNo" FilterControlAltText="Txt_MdlNo" HeaderText="MdlNumber" UniqueName="Txt_MdlNo" HeaderStyle-Width="20%"  >
                                            </telerik:GridBoundColumn>
                                             <telerik:GridBoundColumn DataField="Guid_TestCode" FilterControlAltText="Guid_TestCode" HeaderText="Test Code" UniqueName="Guid_TestCode" HeaderStyle-Width="10%"   >
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="txt_TestName" FilterControlAltText="txt_TestName" HeaderText="Test Name" UniqueName="txt_TestName" HeaderStyle-Width="50%"   >
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Date_Created" FilterControlAltText="Date_Created" HeaderText="Date Created" UniqueName="Date_Created" HeaderStyle-Width="20%"  >
                                            </telerik:GridBoundColumn>
 <%--                                             <telerik:GridBoundColumn Aggregate="Count" FooterText="Total ITems Received: " DataField="Txt_MdlNo" FilterControlAltText="Txt_MdlNo" HeaderText="MdlNumber" UniqueName="Txt_MdlNo" HeaderStyle-Width="100px"  >
                                            </telerik:GridBoundColumn>
                                             <telerik:GridBoundColumn DataField="Guid_TestCode" FilterControlAltText="Guid_TestCode" HeaderText="Test Code" UniqueName="Guid_TestCode" HeaderStyle-Width="70px"   >
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="txt_TestName" FilterControlAltText="txt_TestName" HeaderText="Test Name" UniqueName="txt_TestName" HeaderStyle-Width="300px"   >
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Date_Created" FilterControlAltText="Date_Created" HeaderText="Date Created" UniqueName="Date_Created" HeaderStyle-Width="150px"  >
                                            </telerik:GridBoundColumn>--%>
                                            </Columns>
                                    <HeaderStyle BackColor="PowderBlue" />
                                       </MasterTableView>
                                </telerik:RadGrid>
                            </div>
                    </NestedViewTemplate>

 

 

 

 

[Attila Antal]

Hi Carlos,

Thanks for the details.

By looking at the settings, I am suspecting the problem is related to the Width set in percentage for the columns and the Grid.

When the UseStaticHeaders is set to true, the grid will render 3 tables. One for the Header (columns) one table for the rows and one for the footer, therefore, the Columns set in percentage can actually get distorted.

The solution is to set the Width for all columns and use pixels as the unit instead of percentage.

From the code you shared I see that you have tried that before but it is commented out now. That's how it should be done.

<telerik:GridBoundColumn Aggregate="Count" FooterText="Total ITems Received: " DataField="Txt_MdlNo" FilterControlAltText="Txt_MdlNo" HeaderText="MdlNumber" UniqueName="Txt_MdlNo" HeaderStyle-Width="100px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Guid_TestCode" FilterControlAltText="Guid_TestCode" HeaderText="Test Code" UniqueName="Guid_TestCode" HeaderStyle-Width="70px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="txt_TestName" FilterControlAltText="txt_TestName" HeaderText="Test Name" UniqueName="txt_TestName" HeaderStyle-Width="300px">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Date_Created" FilterControlAltText="Date_Created" HeaderText="Date Created" UniqueName="Date_Created" HeaderStyle-Width="150px">
</telerik:GridBoundColumn>