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 414 Views

Grid

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

23 Answers, 1 is accepted

answered on 08 Aug 2013, 01:48 AM

screenshot1.png

screenshot2.png

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>

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

<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" >

<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.

answered on 12 Aug 2013, 08:16 AM

RadGridScrollStaticHeadersExample.zip

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.

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.

answered on 28 Oct 2013, 11:46 AM

RadGridScrollBasicSample.zip

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

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..

answered on 11 Mar 2015, 03:22 AM

capture.png

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!

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

answered on 13 Jun 2016, 12:28 PM

ie6.png

modernbrowsers.png

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.

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>