Hello,
I am having a strange problem with the RadGrid on IE 9. The grid looks fine when published to a site, but when I am debugging code in Visual Studio 2008 the column alignment does not align with the headers. This is affecting all grids in every .NET project that I have, but again - only when debugging or browsing the page from within Visual Studio.
This issue originally occurred when I went to IE 9 and only occurs when debugging or browsing a page in Visual Studio. I had found a fix before, but cannot remember what the fix was (it was a either a setting in either IE or a modification to the skin for the grid) and cannot find it now. Once the latest ASP.NET AJAX update was applied, the issue came back. A sample of a grid that is affected by this issue is provided below.
<
asp:Content
ID
=
"ViewEventLogContent"
ContentPlaceHolderID
=
"ViewEventLogContent"
Runat
=
"Server"
>
<
asp:Panel
ID
=
"pnlEventLog"
runat
=
"server"
Visible
=
"false"
>
<
table
border
=
"0"
cellpadding
=
"0"
cellspacing
=
"0"
width
=
"100%"
class
=
"gridTableStyle"
>
<
tr
><
td
style
=
"height:10px"
> </
td
></
tr
>
<
tr
>
<
td
>
<
telerik:RadGrid
ID
=
"RadGridEventLog"
runat
=
"server"
AutoGenerateColumns
=
"false"
AllowSorting
=
"True"
AllowPaging
=
"true"
Skin
=
"Simple"
ClientSettings-Resizing-AllowColumnResize
=
"true"
ItemStyle-Wrap
=
"false"
Width
=
"95%"
HeaderStyle-Wrap
=
"false"
PageSize
=
"10"
OnNeedDataSource
=
"RadGridEventLog_NeedDataSource"
>
<
PagerStyle
Mode
=
"NumericPages"
/>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
<
MasterTableView
TableLayout
=
"Fixed"
AllowMultiColumnSorting
=
"true"
DataKeyNames
=
"EventLogId"
ShowFooter
=
"false"
PagerStyle-AlwaysVisible
=
"false"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"EventLogId"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Event Log ID"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
DataField
=
"CampaignId"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Campaign ID"
HeaderStyle-Width
=
"80"
/>
<
telerik:GridBoundColumn
DataField
=
"EventStatusDesc"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Event Status"
HeaderStyle-Width
=
"160"
/>
<
telerik:GridBoundColumn
DataField
=
"EventTypeDesc"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Event Type"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
DataField
=
"EventReasonDesc"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Event Reason"
HeaderStyle-Width
=
"100"
/>
<
telerik:GridBoundColumn
DataField
=
"EventMessage"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Event Message"
HeaderStyle-Width
=
"200"
/>
<
telerik:GridBoundColumn
DataField
=
"FirstName"
HeaderButtonType
=
"TextButton"
HeaderText
=
"First Name"
HeaderStyle-Width
=
"150"
/>
<
telerik:GridBoundColumn
DataField
=
"LastName"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Last Name"
HeaderStyle-Width
=
"150"
/>
<
telerik:GridBoundColumn
DataField
=
"ProfDesignation"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Prof. Designation"
HeaderStyle-Width
=
"200"
/>
<
telerik:GridBoundColumn
DataField
=
"StateLicenseNumber"
HeaderButtonType
=
"TextButton"
HeaderText
=
"SLN"
HeaderStyle-Width
=
"200"
/>
<
telerik:GridBoundColumn
DataField
=
"StateOfLicensure"
HeaderButtonType
=
"TextButton"
HeaderText
=
"State of Licensure"
HeaderStyle-Width
=
"200"
/>
<
telerik:GridBoundColumn
DataField
=
"EmailAddress"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Email"
HeaderStyle-Width
=
"250"
/>
<
telerik:GridDateTimeColumn
DataField
=
"CreateDate"
HeaderButtonType
=
"TextButton"
HeaderText
=
"Date"
HeaderStyle-Width
=
"150"
DataFormatString
=
"{0:MM/dd/yyyy hh:mm:ss tt}"
/>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
td
>
</
tr
>
</
table
>
</
asp:Panel
>
</
asp:Content
>
Thanks,
20 Answers, 1 is accepted
IE9 RC Compatibility Mode supports latest version of RadGrid controls . So try upgrading to the latest version and check whether the issue still persists. Check the following help documentation which explains more about this.
Upgrading RadControls Trial to RadControls Developer license or newer version
Thanks,
Princy.
I have some issues with RadGrid, item displaying in IE 9...It works well with IE 8, loads and displays the data...
In IE 9 RadGrid loads the data but does display anything it looks blank. I am really new to telerik radcontrols and working on someone's
code. Please I need ur help !!!
meta tag compatabiliity is IE 7
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
<telerik:RadGrid ID="rgUnRecipient" runat="server" AutoGenerateColumns="False" Skin="Vista"
Width="100%" AllowPaging="False" AllowMultiRowSelection="true" GridLines="None"
Style="cursor: hand;" Height="107px" OnItemDataBound="rgUnRecipient_ItemDataBound">
<MasterTableView DataKeyNames="PersonID" TableLayout="Fixed" ClientDataKeyNames="PersonID">
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="Name" HeaderText="Name">
<ItemStyle HorizontalAlign="Left" Width="100%" />
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="IsAccountInActive" Visible="false">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings EnablePostBackOnRowClick="false">
<Selecting AllowRowSelect="True" />
<ClientEvents OnColumnClick="rgUnRecipientSorting" />
<Scrolling AllowScroll="True" SaveScrollPosition="True" ScrollHeight="150px" UseStaticHeaders="true" />
</ClientSettings>
<FilterMenu Skin="Office2007" EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>
Thanks,Gowri
I cannot reproduce the issue at my end. RadGrid loads in IE9 as expected. Make sure that you use Advanced data binding using NeedDataSource.
Thanks,
Princy.
Please make sure that TableLayout property of the MasterTableView is set to true and HeaderStyle-Width property is declared for grid columns.
Best wishes,
Pavlina
the Telerik team
You could also try to leave one column without width(for example the last one). Note that when the RadGrid is used with fixed width and static headers and you set some column widths, it is good to leave one column without width. Please refer to forum thread below for more information:
http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx
Regards,
Pavlina
the Telerik team
It can be only set to Auto or Fixed.
Please excuse me for this misunderstanding. I mean to set TableLayout property to Fixed.
Kind regards,
Pavlina
the Telerik team
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<telerik:RadGrid ID="RadGrid1" runat="server" OnItemDataBound="RadGrid_ItemBound"
Height="400px" AllowSorting="True" AllowMultiRowSelection="true" AllowPaging="false"
ShowGroupPanel="false" GridLines="None" AutoGenerateColumns="false" Skin="Office2007"
OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView DataKeyNames="MsgSender_DateTime" DataMember="MsgSender_DateTime"
AllowMultiColumnSorting="false" TableLayout="Fixed" Width="100%">
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldAlias="Received" FieldName="MsgSender_Date" FormatString="{0:D}"
HeaderValueSeparator=" on: "></telerik:GridGroupByField>
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField SortOrder="Descending" FieldName="MsgSender_Date" FormatString=""
HeaderText=""></telerik:GridGroupByField>
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<HeaderStyle Width="45px" HorizontalAlign="Center"></HeaderStyle>
<ItemTemplate>
<asp:Label ID="lblSlNo" runat="server"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn> ........................................................................................................
................................
..........
.
.
.
.
.
</Columns>
</MasterTableView>
<ClientSettings EnableRowHoverStyle="true">
<Selecting AllowRowSelect="True"></Selecting>
<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="275px"></Scrolling>
</ClientSettings>
</telerik:RadGrid>
Which version of RadControls are you using in your project? Can you please check if the described problem persists in the latest version of RadControls for ASP.NET AJAX?
Regards,
Pavlina
the Telerik team
This problem is fixed in Q3 2011 version of RadControls. Please upgrade to this version or the lates one to take care of it. You can follow the instructions from this KB article in order to upgrade your controls to a newer version of the suite.
Greetings,
Pavlina
the Telerik team
I am using window 7 with IE 9 and telerik Q3 version (2012_3_1308,ddl from bin 35) and VS2010 .In my application we are using rad window .Rad Window is open but its show not properly.(not show header proper and lenth also not show proper).When using meta tag <meta http-equiv="X-UA-Compatible" content="IE=7" /> , rad window show properly but rad grid show blank.
Please help us for the same.
Thanks
Kanchan Prabha
Have you got the solution if yes please help me becasuse I am also using
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
tag on page.If someone has fixed this, I would love to know.
Can you try setting MasterTableView Width property to 100% as shown below and let me know if it helps?
.rgMasterTable
{
width
:
100%
;
}
Regarding the skin issue, can you confirm that you are not using any custom styles.
In case the issues still persist please provide the grid declaration and the related code behind, so we can investigate the problem further.
Regards,
Pavlina
Telerik
Thanks.