Radgrid columns misaligned on Internet Explorer when UseStaticHeaders = True and AllowScroll = true

21 posts, 0 answers
  1. Aret
    Aret avatar
    29 posts
    Member since:
    Oct 2011

    Posted 30 Apr 2013 Link to this post

    I have an issue with my Radgrid having misaligned columns when I set the properties for UseStaticHeaders = True and AllowScroll = True.  I think this has been an known issue for quite sometime, because I notice a lot of forum posts back in early 2012 with people addressing this problem.  I was wondering if there was a new up to date fix I need to implement in my code to resolve this issue.  I have already tried many solutions posted in previous forums, but I am still persisting to have problems.  I am using IE6, IE7, and IE8 and they are all displaying the same issue.  If I run it in firefox, I have no issues, but its important that I get it to work in Internet Explorer.
  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 03 May 2013 Link to this post

    Hi Aret,

    Our developers have already fixed this issue. Please upgrade to the latest RadControls release version and the problem should be resolved.

    All the best,
    Eyup
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aret
    Aret avatar
    29 posts
    Member since:
    Oct 2011

    Posted 03 May 2013 Link to this post

    My Telerik dll version is 2013.1.220.40.  It is a very new version that I bought this year.  Which version are you referring to that this issue got fixed because I am still having this issue.
  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 08 May 2013 Link to this post

    Hi Aret,

    It was fixed in the 2013 Q1 Service Pack 1 version of RadControls - 2013.1.403.
    Hope this helps.

    All the best,
    Eyup
    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. MRa
    MRa avatar
    16 posts
    Member since:
    Dec 2012

    Posted 07 Aug 2013 Link to this post

    I have version 2013.2.717.40 and i'm still running into this issue. I've tried all the other suggestions mentioned in the other posts and nothing has worked. Any development on this?
  7. Fuhai
    Fuhai avatar
    6 posts
    Member since:
    Jul 2013

    Posted 07 Aug 2013 Link to this post

    I am using the latest version 2013.2.717.45 and test for ie 7/8/9/10, chrome, and firefox, all of them behave the same, the header div missed one inline style for margin-right: 17px when I compared with the demo.

    here is my html code:

    <telerik:RadGrid runat="server" ID="Grid_CellTypePropertyMap" ClientIDMode="Static"

    AutoGenerateColumns="false" OnItemDataBound="GridCellTypePropertyMap_ItemDataBound" Skin="Sunset" >

    <ClientSettings>

    <Scrolling AllowScroll="True" UseStaticHeaders="True" />

    </ClientSettings>

    <MasterTableView DataKeyNames="ID" ClientDataKeyNames="ID" TableLayout="Fixed">

    <Columns>

    <telerik:GridTemplateColumn HeaderText="<%$ Resources:ColumnAttached.HeaderText %>" UniqueName="AttachedCol" >

    <ItemTemplate>

    <asp:CheckBox ID="chbAttached" runat="server" ClientIDMode="AutoID" ></asp:CheckBox>

    </ItemTemplate>

    </telerik:GridTemplateColumn>

    <telerik:GridBoundColumn DataField="CellTypeName" HeaderText="<%$ Resources:ColumnCellTypeName.HeaderText %>" UniqueName="CellTypeNameCol" />

    <telerik:GridBoundColumn DataField="CellTypeID" HeaderText="<%$ Resources:ColumnCellTypeID.HeaderText %>" UniqueName="CellTypeIDCol" />

    <telerik:GridBoundColumn DataField="PropertyName" HeaderText="<%$ Resources:ColumnCellPropertyName.HeaderText %>" UniqueName="PropertyNameCol" />

    <telerik:GridBoundColumn DataField="PropertyID" HeaderText="<%$ Resources:ColumnCellPropertyID.HeaderText %>" UniqueName="PropertyIDCol" />

    <telerik:GridTemplateColumn HeaderText="<%$ Resources:ColumnDisplayOrder.HeaderText %>" UniqueName="DisplayOrderCol" >

    <ItemTemplate>

    <asp:TextBox ID="txtDisplayOrder" runat="server" Width="26px" ></asp:TextBox>

    </ItemTemplate>

    </telerik:GridTemplateColumn>

    </Columns>

    </MasterTableView>

    </telerik:RadGrid>

    the code behind will be something when the button click, then the grid will be populated. did not see anything to do from code behind. I attached the screenshots here, one for page, one the F12 tool in IE10. so hope something from setting to control the control's render for the scroll and static header alignments by the style injection dynamically. because I played around bit with add on that missing inline style, and found another issue if I change the div rgDataDiv inline style height to 100% to make the scroll bar disappear, then the alignments will be happening in the expected way -- the space I attached in the header becomes the killer again. hope this maybe not really true for the play from the tool for this feature. please advice and thanks lots.

  8. Fuhai
    Fuhai avatar
    6 posts
    Member since:
    Jul 2013

    Posted 07 Aug 2013 Link to this post

    Hey Eyup,

    I forgot to say my page is using a master page, and the things is inside one telerik ajaxpanel, not sure if this will impact the rendering for the header wrapper divs.

    Regards,

    Fuhai
  9. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 12 Aug 2013 Link to this post

    Hi,

    I am attaching a sample RadGrid web site which I tested under all major browsers with the mentioned RadControls version 2013, 2, 717. Please run the attached application and let me know about the result.

    Looking forward to your reply. Thank you for your feedback in advance.

    Regards,
    Eyup
    Telerik
    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 the blog feed now.
  10. Fuhai
    Fuhai avatar
    6 posts
    Member since:
    Jul 2013

    Posted 13 Aug 2013 Link to this post

    Thanks Eyup,

    Really appreciated your sample code tips, this made me check my code again with some testing, actually, after removed one piece of code from the radgrid definition, it worked as expected, all the alignment fixed automatically. so the piece of code I removed is the key:
    ClientIDMode="Static",
    And I verified if this piece of code added to your sample code, it will have the same issue as I had before, not really it is a bug or not, but we found the key to avoid this issue. 
    Regards,


    Fuhai
  11. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 16 Aug 2013 Link to this post

    Hello Fuhai,

    I am glad that the provided project was helpful in resolving the issue. Please note that Static id mode is not supported by RadControls. You can check out many forum threads explaining this matter:
    http://www.telerik.com/community/forums/aspnet-ajax/calendar/problem-with-clientidmode-static.aspx

    Hope the clarification was helpful.

    Regards,
    Eyup
    Telerik
    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 the blog feed now.
  12. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 23 Oct 2013 Link to this post

    I have noticed that this problem has reappeared in IE10 - a grid where the columns previously aligned OK in IE6,7,8 and 9 suddenly does not in IE10. The grid displays with the headers the right size, but the actual grid columns are too small. Hitting F12 and selecting any other IE mode fixes, but that's not a long term fix, not is forcing compatibility mode with meta tags.

    The odd thing is that the grid displays misaligned, but as soon as you do anything with the headers (resize a column, move a column) the grid columns resize themselves properly.

    A permanent fix for this would be appreciated!


    ... and yes, I just downloaded the latest release and it still exhibits the same behaviour. Fortunately my clients are slow to change and are still standardised on IE8 so I am the only one seeing this at the moment.
  13. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 28 Oct 2013 Link to this post

    Hello Phil,

    I have prepared a sample RadGrid web site to test the described behavior. On my side the headers and columns are aligned as expected. Can you please run the attached application and instruct us the exact steps to reproduce the problematic appearance?

    Regards,
    Eyup
    Telerik
    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 the blog feed now.
  14. Simon
    Simon avatar
    1 posts
    Member since:
    Oct 2012

    Posted 29 Nov 2013 Link to this post

    Hi, Just to add to this discussion, THe problem for us is only when using dynamically created columns and adjusting the font sizes in ItemDataBound. In our project static columns scroll fine in IE, even dynamic ones scroll fine, however as soon as we adjust the font size and row height properties for dynamically created columns in the ItemDataBound then this problem is happening. We had hoped to have configurable rowheights but I think this may have to be jettisoned to get around this issue.

    Just to add found a resolution
    AllowRowResize="true"

    This was set = false, there we go. I hope this soliloquy can help others..
  15. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 04 Dec 2013 Link to this post

    Hi Simon,

    Thank you for sharing the solution you found. I hope it helps other developers as well.

    Nevertheless, we will research the problem with a deeper insight to see what  actually causes the issue.

    Regards,
    Eyup
    Telerik
    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 the blog feed now.
  16. Denise
    Denise avatar
    2 posts
    Member since:
    Apr 2009

    Posted 26 Mar 2014 Link to this post

    Hi,
    I am facing problem in the RADGRID column alignment. I am using 2013.3.1015.35 version. In firefox it works good but in IE 10 it's not working. In IE 11 it's working good.

    Regards,
    Rathina
  17. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 31 Mar 2014 Link to this post

    Hello Rathina,

    Do you replicate this problem with any of our live samples?
    http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx

    It would be great if you can instruct us the exact steps to reproduce the issue. Thus, we will be able to further  analyze the problem and suggest a proper solution.

    Regards,
    Eyup
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  18. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jan 2014

    Posted 10 Mar 2015 Link to this post

    Hi,

    I am having misaligned problem in IE browser (with frozen columns)  when i scrolled to the end (horizontal), the frozen column items auto added 1px to its own width, making the subsequent columns misaligned.


    this issue does not happened in Chrome!
  19. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 13 Mar 2015 Link to this post

    Hi Dennis,

    Based on the provided information it would be hard to pinpoint what is causing the misalignment. Would you send the full markup of RadGrid? This will enable us to examine the code and look for a possible cause of the issue.

    With this said, check the column settings and ensure that there is one column where the Width property is not defined.

    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  20. siva
    siva avatar
    2 posts
    Member since:
    Apr 2015

    Posted 10 Apr 2015 Link to this post

    Hi Telerik team,
     
    We are using Telerik version 2008.2.1001.35 and are encountering few issues in IE11 due to the version. Please find the issues explained below -
    1.       We have a Grid view alignment issue where the row alignment is not proper in the grid.
    2.       The text in one column of the grid is overlapping with the next column.
    3.       While disabling a control it turns greyed out. But in this version of Telerik, the text is disabled but the borders and icons of the control are in blue color.
     
    Please let us know as to how to resolve the above issues.
     
    Regards,
    Siva
    CMS Dev Team,
    CitiDirect
  21. Muhammad
    Muhammad avatar
    1 posts
    Member since:
    May 2011

    Posted 13 Jun in reply to Eyup Link to this post

    Dear Eyup/Telerik Team,

    I have implemented your code with Telerik 2013 Q3 but my issue did not resolve, attached is the result in IE6, kindly give me the solution for IE6 specific.

    Thanks,

    Yousaf.

  22. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 15 Jun Link to this post

    Hello Yousaf,

    Please note that IE6 is not supported. Thus, it is expected to see visual glitches in that browser version.

    For an up-to-date list of the supported browsers you can check the following page:



    Regards,
    Viktor Tachev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017