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

RadGrid breaks in Interner Explorer 9 Compatibility mode

5 Answers 60 Views

Grid

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

Alyssa asked on 01 Jul 2013, 08:50 AM

sampleimage.png

Hi! I have this radgrid control that displays data from database. It works fine in IE 9 up and other browsers except when IE compatibility mode was on. It looks like the last part, maybe 1/6 part of the radgrid, or the last 3 rows of 10, disappeared or was broken, and from there, all other controls below it was not being displayed. I checked related forums but it doesn't solve my problem. I use asp.net and c# and the telerik version is 2008.2.826.20 trial version. Please see my attached file for screenshot. Here's my code:
Please help me. Thanks.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="entityAccess.ascx.cs"

Inherits="userControls_entityAccess" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<table width="100%">

<tr>

<td class="roletablebullet" style="width: 798px; height: 46px">

<asp:Label ID="lblModuleName" runat="server" CssClass="moduleName" EnableViewState="False"

Text="Role Level Security" Width="189px"></asp:Label>

</td>

</tr>

<tr>

<td colspan="1" style="width: 798px; height: 15px">

</td>

</tr>

<tr>

<td colspan="1" style="width: 798px; height: 15px">

<table class="detailsTable" style="width: 882px">

<tr>

<td class="labelInput" style="width: 538px; height: 21px">

Entity Name

</td>

<td style="width: 59px; height: 21px">

<telerik:RadTextBox ID="rdEntityName" runat="server" BorderColor="Transparent" Enabled="False"

Font-Bold="True" Font-Size="Medium" Width="200px">

</telerik:RadTextBox>

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

</tr>

</table>

<table>

</table>

</td>

</tr>

<tr>

<td align="left" class="moduleBullet" colspan="4" style="width: 1000px; height: 34px">

<asp:Label ID="Label1" runat="server" CssClass="moduleName" EnableViewState="False"

Text="Assigned Roles" Width="168px"></asp:Label>

</td>

</tr>

<tr>

<td align="right" style="width: 1000px; height: 34px">

<table style="width: 882px">

<tr>

<td> </td>

<td align="right" class="labelInput" width="180px" >Search Entity by Username :</td>

<td align="right" width="80px" ><telerik:RadTextBox ID="rtxtSearch" runat="server" EmptyMessage="Enter username"></telerik:RadTextBox></td>

<td align="center" width="50px" ><asp:Button ID="btnSearch" runat="server" CssClass="buttonNormal" Text="Search" OnClick="btnSearch_Click" /></td>

<td> </td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="left" colspan="4" style="width: 1000px; height: 34px">

<telerik:RadGrid ID="rdgrdOrgList3" runat="server" AllowPaging="True" AutoGenerateColumns="False"

GridLines="None" OnNeedDataSource="rdgrdOrgList_NeedDataSource" OnItemDataBound="rdgrdOrgList3_ItemDataBound"

OnDeleteCommand="rgrdEntityAccess_DeleteCommand" Skin="Office2007" Width="752px" ShowGroupPanel="true" AllowSorting="true"

ShowStatusBar="true">

<MasterTableView DataKeyNames="OrgID" AllowMultiColumnSorting="True" Width="100%">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="OrgID" MasterKeyField="OrgID"></telerik:GridRelationFields>

</ParentTableRelation>

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn AllowFiltering="False" Display="False" UniqueName="TemplateColumn">

<ItemTemplate>

<asp:CheckBox ID="chkOrg" runat="server" Width="10px" />

</ItemTemplate>

<HeaderStyle Width="20px" />

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn Display="False" EditText="">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" UniqueName="column3"

ConfirmText="Are you sure you want to delete this Item?">

</telerik:GridButtonColumn>

<telerik:GridTemplateColumn HeaderText="Access" UniqueName="TemplateColumn_AccessToUpdate">

<ItemTemplate>

<asp:CheckBox ID="chkUpdateAccess" runat="server" Width="10px" ToolTip="Check to Update" />

</ItemTemplate>

<HeaderStyle Width="60px" />

<ItemStyle Width="60px" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="AccessID" Display="True" UniqueName="txtAccessID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="OrgID" Display="False" HeaderText="Org ID" UniqueName="txtOrgID">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="OrgName" HeaderText="Organization Name" UniqueName="txtOrgNM">

<HeaderStyle Width="300px" />

<ItemStyle Width="300px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="OrgType" Display="False" HeaderText="Type" UniqueName="column2">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="RoleID" Display="True" UniqueName="txtRoleID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="RoleNM" HeaderText="Role Name" UniqueName="column4">

<HeaderStyle Width="200px" />

<ItemStyle Width="200px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UserID" Display="true" UniqueName="txtUserID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UserName" HeaderText="User Name" UniqueName="column5">

<HeaderStyle Width="200px" />

<ItemStyle Width="200px" />

</telerik:GridBoundColumn

<telerik:GridTemplateColumn HeaderText="Create" UniqueName="TemplateColumn1">

<ItemTemplate>

<asp:CheckBox ID="chkCreate" runat="server" Checked='<%# Bind("[Create]") %>' Width="10px" ToolTip="Check Access to Update" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Read" UniqueName="TemplateColumn1">

<ItemTemplate>

<asp:CheckBox ID="chkRead" runat="server" Checked='<%# Bind("[Read]") %>' Width="10px" ToolTip="Check Access to Update" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Update" UniqueName="TemplateColumn1">

<ItemTemplate>

<asp:CheckBox ID="chkUpdate" runat="server" Checked='<%# Bind("[Update]") %>' Width="10px" ToolTip="Check Access to Update" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Delete" UniqueName="TemplateColumn1">

<ItemTemplate>

<asp:CheckBox ID="chkDelete" runat="server" Checked='<%# Bind("[Delete]") %>' Width="10px" ToolTip="Check Access to Update" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Partners" UniqueName="TemplateColumn_PartnerAccess">

<ItemTemplate>

<asp:CheckBox ID="chkPartnerAccess" runat="server" Checked='<%# Bind("[XS3]") %>'

Width="10px" ToolTip="Check Access to Update"/>

</ItemTemplate>

<HeaderStyle Width="60px" />

<ItemStyle Width="60px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Monthly Report" UniqueName="TemplateColumn_MRAccess">

<ItemTemplate>

<asp:CheckBox ID="chkMRAccess" runat="server" Checked='<%# Bind("[XS2]") %>'

Width="10px" ToolTip="Check Access to Update"/>

</ItemTemplate>

<HeaderStyle Width="60px" />

<ItemStyle Width="60px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="No Access" UniqueName="TemplateColumn1" Visible="false">

<ItemTemplate>

<asp:CheckBox ID="chkNoAccess" runat="server" Checked='<%# Bind("[NoAccess]") %>'

Width="10px" />

</ItemTemplate>

<HeaderStyle Width="60px" />

<ItemStyle Width="60px" />

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn CommandName="SelectUser" Text="Limited User" UniqueName="column1"

Visible="false">

<HeaderStyle Width="100px" />

<ItemStyle Width="100px" Wrap="True" />

</telerik:GridButtonColumn>

</Columns>

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

</MasterTableView>

<ClientSettings AllowDragToGroup="True">

</ClientSettings>

<FilterMenu EnableTheming="True" Skin="Hay">

<CollapseAnimation Duration="200" Type="OutQuint" />

</FilterMenu>

<CommandItemStyle BorderStyle="Solid" />

</telerik:RadGrid>

</td>

</tr>

<tr>

<td align="left" style="width: 1000px; height: 34px">

<table style="width: 882px">

<tr>

<td align="center" class="labelInput" width="60px" >Update Access Down to:</td>

<td align="left" width="50px" >

<telerik:RadComboBox ID="cboCrawl" runat="server" Skin="Hay">

<CollapseAnimation Duration="200" Type="OutQuint" />

</telerik:RadComboBox>

</td>

<td align="left" width="80px" >

<asp:Button ID="btnUpdate" runat="server" CssClass="buttonNormal" OnClick="btnUpdate_Click" Text="Update Roles" Width="89px" />

</td>

<td align="left" width="80px" ></td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="left" colspan="4" style="width: 1000px; height: 34px">

<asp:UpdateProgress ID="UpProgOrgRoles" runat="server">

<ProgressTemplate>

<img src="../images/loadingCircle.gif" /><asp:Label ID="lbluprogSubjectListing" runat="server"

CssClass="textNormal" Text="Updating Content..."></asp:Label>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"></asp:ObjectDataSource>

<br />

<asp:UpdatePanel ID="UpPanelORgRoles" runat="server">

<ContentTemplate>

<table style="width: 945px">

<tr>

<td class="labelInput" style="width: 159px; height: 49px">

Organization

</td>

<td style="width: 267px; height: 49px">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<telerik:RadComboBox ID="cboOrg" runat="server" AutoPostBack="True" DataTextField="RoleNM"

DataValueField="RoleID" OnSelectedIndexChanged="cboOrg_SelectedIndexChanged"

Skin="Hay">

<CollapseAnimation Duration="200" Type="OutQuint" />

</telerik:RadComboBox>

</ContentTemplate>

</asp:UpdatePanel>

</td>

<td class="labelInput" style="width: 267px; height: 49px">

Role Name

</td>

<td style="width: 267px; height: 49px">

<asp:UpdatePanel ID="updateRoles" runat="server">

<ContentTemplate>

<telerik:RadComboBox ID="cboRoles" runat="server" DataTextField="RoleNM" DataValueField="RoleID"

Skin="Hay" OnSelectedIndexChanged="cboRoles_SelectedIndexChanged" AutoPostBack="true"

EnableViewState="false">

<CollapseAnimation Duration="200" Type="OutQuint" />

</telerik:RadComboBox>

</ContentTemplate>

<%-- <Triggers>

<asp:AsyncPostBackTrigger ControlID="cboOrg" />

</Triggers>--%>

</asp:UpdatePanel>

</td>

<td class="labelInput" style="width: 267px; height: 49px">

Users

</td>

<td style="width: 267px; height: 49px">

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>

<telerik:RadComboBox ID="Users_rcb" runat="server" Skin="Hay" DataTextField="UserLogin"

Enabled="true" DataValueField="UserID">

</telerik:RadComboBox>

</ContentTemplate>

<%-- <Triggers>

<asp:AsyncPostBackTrigger ControlID="cboRoles" />

</Triggers>--%>

</asp:UpdatePanel>

</td>

<td style="width: 267px; height: 49px">

<asp:CheckBox ID="CheckBox1" CssClass="labelInput" runat="server" Text="All Users"

Width="143px" AutoPostBack="True" OnCheckedChanged="chkAllUsers_CheckedChanged" />

</td>

</tr>

</table>

<table class="detailsTable" style="width: 882px">

<tr>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkCreate" runat="server" Text="Create" Width="79px" />

</td>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkRead" runat="server" Text="Read" Width="79px" />

</td>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkUpdate" runat="server" Text="Update" />

</td>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkDelete" runat="server" Text="Delete" />

</td>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkPartnerAccess" runat="server" Text="Partner" />

</td>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkNoAccess" runat="server" Text="No Access" Visible="false" />

</td>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkMRAccess" runat="server" Text="Monthly Reports" />

</td>

</tr>

<tr>

<td style="width: 443px; height: 21px">

<%-- <asp:CheckBox ID="CheckBox1" runat="server" Text="All Users" Width="143px" AutoPostBack="True"

OnCheckedChanged="chkAllUsers_CheckedChanged" />--%>

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

</tr>

<tr>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

</tr>

<tr>

<td style="width: 443px; height: 21px">

<asp:CheckBox ID="chkLimited" runat="server" Text="With Limited User" Width="143px"

Visible="false" AutoPostBack="True" OnCheckedChanged="chkLimited_CheckedChanged" />

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

<td style="width: 443px; height: 21px">

</td>

</tr>

</table>

<br />

<asp:Label ID="ErrorLbl" runat="server" class="labelInput" ForeColor="Red"></asp:Label>

<br />

<asp:Button ID="btnAdd" runat="server" CssClass="buttonNormal" OnClick="btnAdd_Click"

Text="Add" Width="89px" />

</ContentTemplate>

</asp:UpdatePanel>

<br />

</td>

</tr>

<tr>

<td colspan="1" style="width: 798px; height: 15px">

<br />

<asp:TextBox ID="rtxtOrgID" runat="server" Visible="False"></asp:TextBox>

</td>

</tr>

<%--<telerik:RadWindowManager ID="rwmMaster" runat="server">

</telerik:RadWindowManager>--%>

</table>

<asp:SqlDataSource ID="USERS_sds" runat="server" ConnectionString="<%$ ConnectionStrings:ConnString %>"

SelectCommand="SELECT distinct (U.FirstNM) as UserName, O.UserID as UserID  FROM t_User U, t_OrgRolesAccess O WHERE O.userID = U.UserID AND U.Deleted = 0 and O.Deleted = 0 AND O.OrgID = @OrgID and O.RoleID=@RoleID">

<SelectParameters>

<asp:ControlParameter ControlID="cboOrg" PropertyName="SelectedValue" Name="OrgID" Type="Int64" />

<asp:ControlParameter ControlID="cboRoles" PropertyName="SelectedValue" Name="RoleID" Type="Int64" />

</SelectParameters>

</asp:SqlDataSource>

<asp:Label ID="Error_lbl" runat="server" ForeColor="Red"></asp:Label>

5 Answers, 1 is accepted

answered on 03 Jul 2013, 02:07 PM

RadGridTEMP5.zip

Hi Alyssa,

I run your code and I am afraid that the same issue is not replicating on my side. I am resending a sample project where RadGrid behaves as expected. Please give it a try.

I would advise you to upgrade your version of the controls. Also you should know that using tables for building your application layout is not a recommended technique.

Regards,
Venelin
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 22 Jan 2014, 02:21 PM

GridIssue.jpg

I am having a similar issue in IE9 Compatibility Mode. Here is the Grid Code:

<telerik:RadGrid ID="rgData" runat="server" AllowPaging="true" PageSize="20" AllowSorting="true" AutoGenerateColumns="true" ClientSettings-Scrolling-AllowScroll="true" ClientSettings-Scrolling-ScrollHeight="600px" ClientSettings-AllowColumnsReorder="true" Width="1050px">

<PagerStyle Position="TopAndBottom" />

<MasterTableView CommandItemDisplay="TopAndBottom" AllowMultiColumnSorting="true" Width="1050px">

<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />

</MasterTableView>

<ExportSettings HideStructureColumns="true" ExportOnlyData="true" IgnorePaging="true"

OpenInNewWindow="true" Excel-FileExtension="xls" Excel-Format="Html">

</ExportSettings>

</telerik:RadGrid>

and attached is the resulting display

answered on 30 Jan 2014, 09:27 AM

ie-comapt-view.jpg

network.jpg

Hello Sam,

1. You should check in IE's web developer tool under Network tab or with another tool like Fiddler if the resources are loaded correctly (network.jpg)
2. Also check in Visual Studio if both Telerik.Web.UI and Telerik.Web.UI.Skins dlls are the same versions.

I also attach a sample project based on your code. You can see the result on the screenshot
ie_comapt_view.jpg

Regards,
Venelin
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 UI for ASP.NET AJAX, subscribe to the blog feed now.