Grid Header Alignment Problem While Fixed Header

21 posts, 0 answers
  1. Anoop
    Anoop avatar
    7 posts
    Member since:
    Oct 2011

    Posted 21 Oct 2011 Link to this post

    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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Oct 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anoop
    Anoop avatar
    7 posts
    Member since:
    Oct 2011

    Posted 21 Oct 2011 Link to this post

    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
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 26 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. Anoop
    Anoop avatar
    7 posts
    Member since:
    Oct 2011

    Posted 26 Oct 2011 Link to this post

    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
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 26 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  8. Ammar
    Ammar avatar
    6 posts
    Member since:
    Sep 2011

    Posted 26 Oct 2011 Link to this post

    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>

  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 27 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  10. Simone
    Simone avatar
    34 posts
    Member since:
    Mar 2011

    Posted 10 Feb 2012 Link to this post

    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");
            }
  11. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 14 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  12. Evgeny Vdovin
    Evgeny Vdovin avatar
    29 posts
    Member since:
    May 2006

    Posted 23 May 2012 Link to this post

     

    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,

  13. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 06 Mar 2013 Link to this post

    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

  14. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  15. Kapil
    Kapil avatar
    1 posts
    Member since:
    Apr 2013

    Posted 17 Apr 2013 Link to this post

    if you do not give the headerstyle width to last column it gets hidden.
  16. Kiran
    Kiran avatar
    5 posts
    Member since:
    Oct 2012

    Posted 26 Nov 2014 in reply to Sunil Link to this post

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

    Regards,
    Kiran
  17. Onkaramurthy
    Onkaramurthy avatar
    8 posts
    Member since:
    Dec 2013

    Posted 28 Jul 2015 Link to this post

    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,

  18. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 28 Jul 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  19. Onkaramurthy
    Onkaramurthy avatar
    8 posts
    Member since:
    Dec 2013

    Posted 29 Jul 2015 in reply to Pavlina Link to this post

    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,

     

     

     

     

  20. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 29 Jul 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
  21. Onkaramurthy
    Onkaramurthy avatar
    8 posts
    Member since:
    Dec 2013

    Posted 30 Jul 2015 in reply to Pavlina Link to this post

    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,

  22. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 04 Aug 2015 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017