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

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

23 Answers 324 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aret
Top achievements
Rank 1
Aret asked on 30 Apr 2013, 03:16 PM
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.

23 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 03 May 2013, 07:48 AM
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.
0
Aret
Top achievements
Rank 1
answered on 03 May 2013, 12:08 PM
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.
0
Eyup
Telerik team
answered on 08 May 2013, 08:20 AM
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.
0
MRa
Top achievements
Rank 1
answered on 07 Aug 2013, 04:32 PM
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?
0
Fuhai
Top achievements
Rank 1
answered on 08 Aug 2013, 01:48 AM
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.

0
Fuhai
Top achievements
Rank 1
answered on 08 Aug 2013, 02:07 AM
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
0
Eyup
Telerik team
answered on 12 Aug 2013, 08:16 AM
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.
0
Fuhai
Top achievements
Rank 1
answered on 13 Aug 2013, 12:52 PM
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
0
Eyup
Telerik team
answered on 16 Aug 2013, 07:11 AM
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.
0
Phil
Top achievements
Rank 2
answered on 23 Oct 2013, 10:15 AM
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.
0
Eyup
Telerik team
answered on 28 Oct 2013, 11:46 AM
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.
0
Simon
Top achievements
Rank 1
answered on 29 Nov 2013, 02:09 PM
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..
0
Eyup
Telerik team
answered on 04 Dec 2013, 09:36 AM
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.
0
Denise
Top achievements
Rank 1
answered on 26 Mar 2014, 07:44 PM
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
0
Eyup
Telerik team
answered on 31 Mar 2014, 09:32 AM
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.

 
0
Dennis
Top achievements
Rank 1
answered on 11 Mar 2015, 03:22 AM
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!
0
Viktor Tachev
Telerik team
answered on 13 Mar 2015, 02:58 PM
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.

 
0
siva
Top achievements
Rank 1
answered on 10 Apr 2015, 02:43 PM
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
0
Muhammad
Top achievements
Rank 1
answered on 13 Jun 2016, 12:28 PM

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.

0
Viktor Tachev
Telerik team
answered on 15 Jun 2016, 10:43 AM
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.
0
Vivek
Top achievements
Rank 1
answered on 28 Jul 2017, 12:37 PM

HI,

My Telerik dll version is 2017.1.118.40. My RadGrid columns are aligned properly in all browsers except IE11. I have already tried many solutions posted in previous forums, but I am still facing misaligned columns problem in IE 11. Please provide a solution for this. 

<telerik:RadGrid ID="RadGrid1" runat="server" Height="100%" Width="100%"
                        AllowPaging="True" AllowSorting="True" PageSize="100" 
                        style="min-height:300px; height:100%; width:100%; z-index:1;"
                        AllowFilteringByColumn="True"
                        OnNeedDataSource="RadGrid1_NeedDataSource"
                        OnItemCommand="RadGrid1_ItemCommand"
                        >
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" ShowPagerText="false" EnableSEOPaging="false">
                        </PagerStyle>
                        <ClientSettings >
                            <Resizing AllowRowResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="false" 
                                AllowColumnResize="True" ClipCellContentOnResize="false"></Resizing>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                            <Selecting AllowRowSelect="true" />
                        </ClientSettings>
                        <CommandItemStyle HorizontalAlign="Right"></CommandItemStyle>
            <MasterTableView CommandItemDisplay="Top">
            <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />
            </MasterTableView>

        </telerik:RadGrid>

0
Nikolaus
Top achievements
Rank 1
answered on 06 Sep 2017, 11:10 AM

Hello all, I had the same problem with the current version of telerik asp controls.

I solved the problem by removing the affected sites from the compatibility view in IE11.

Hope this helps.

 

0
Nikolaus
Top achievements
Rank 1
answered on 06 Sep 2017, 11:12 AM

Hi,

I had the same problem because the effected site where in the compatibility view list in IE11. I removed it and everything looks fine now.

Tags
Grid
Asked by
Aret
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Aret
Top achievements
Rank 1
MRa
Top achievements
Rank 1
Fuhai
Top achievements
Rank 1
Phil
Top achievements
Rank 2
Simon
Top achievements
Rank 1
Denise
Top achievements
Rank 1
Dennis
Top achievements
Rank 1
Viktor Tachev
Telerik team
siva
Top achievements
Rank 1
Muhammad
Top achievements
Rank 1
Vivek
Top achievements
Rank 1
Nikolaus
Top achievements
Rank 1
Share this question
or