We are using the 2010 version of ASP.NET AJAX Controls. When the IE is set to IE-8 Compatibility mode, then the page is not displaying as expected.
We have a ASP.net panel and inside the panel we are calling the RadScheduler control. When the IE is set to IE-8 Compatibility mode the RadScheduler is getting hidden and also it is displaying over the panel.
Can you please help me to resolve this issue. I am pasting below a sample code. I am also attaching the screenshot.
Regards,
Govind
Default.aspx
-------------------------------------------------------------------------
<%
@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Scheduler._Default" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%
--<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>--%>
<%
--<%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
<%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
<%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>--
%>
<%
--<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>--%>
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head id="Head1" runat="server">
<%
--<qsf:HeadTag ID="Headtag1" runat="server" />--%>
<style type="text/css">
/* Fix for header wrapping issue in IE6/7 */* html #RadScheduler1 div.rsHeader h2
{
position: absolute;
}
* + html #RadScheduler1 div.rsHeader h2
{
position: absolute;
}
.Monday
{
color: blue !important;
}
.rsCategoryBlue
{
border-bottom-color: #9bb0cc;
border-top-color: #9bb0cc;
border-right-color: #9bb0cc;
border-left-color: #9bb0cc;
}
.rsCategoryRed
{
border-bottom-color: #cc9b9b;
border-top-color: #cc9b9b;
border-right-color: #cc9b9b;
border-left-color: #cc9b9b;
}
.rsCategoryGreen
{
border-bottom-color: #b0cc9b;
border-top-color: #b0cc9b;
border-right-color: #b0cc9b;
border-left-color: #b0cc9b;
}
.rsCategoryOrange
{
border-bottom-color: #cdb597;
border-top-color: #cdb597;
border-right-color: #cdb597;
border-left-color: #cdb597;
}
.rsCategoryPink
{
border-bottom-color: #d1bcdf;
border-top-color: #d1bcdf;
border-right-color: #d1bcdf;
border-left-color: #d1bcdf;
}
.rsCategoryYellow
{
border-bottom-color: #dfdba7;
border-top-color: #dfdba7;
border-right-color: #dfdba7;
border-left-color: #dfdba7;
}
.rsCategoryViolet
{
border-bottom-color: #742062;
border-top-color: #742062;
border-right-color: #742062;
border-left-color: #742062;
}
.rsCategoryDarkRed
{
border-bottom-color: #370505;
border-top-color: #370505;
border-right-color: #370505;
border-left-color: #370505;
}
.rsCategoryDarkGreen
{
border-bottom-color: #053705;
border-top-color: #053705;
border-right-color: #053705;
border-left-color: #053705;
}
.rsCategoryDarkBlue
{
border-bottom-color: #304364;
border-top-color: #304364;
border-right-color: #304364;
border-left-color: #304364;
}
</style>
<script type="text/javascript">
function OnClientNavigationCommand(sender, eventArgs) {
// 7 = SwitchToDayView
if (eventArgs.get_command() == 7)
eventArgs.set_cancel(
true);
}
/* Firefox resize scrollable content */
function hideScrollableArea(sender, eventArgs) {
if ($telerik.isFirefox)
$telerik.$(
'.rsContentScrollArea').css('overflow', 'hidden');
}
function showScrollableArea(sender, eventArgs) {
if ($telerik.isFirefox)
$telerik.$(
'.rsContentScrollArea').css('overflow', 'auto');
}
</script>
</
head>
<
body class="BODY">
<form id="Form1" method="post" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadScheduler1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadSplitter1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadScheduler2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadSplitter1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" InitialDelayTime="200" />
<div class="exampleContainer" width="500px" style="vertical-align: top">
<%
-- <telerik:RadSplitter runat="server" ID="RadSplitter1" Width="740px">
<telerik:RadPane runat="server" ID="SchedulerPane" MinWidth="350" Width="500px" Scrolling="None">
</telerik:RadPane>
</telerik:RadSplitter>--
%>
<asp:Panel ID="Panel1" runat="server" ScrollBars="Horizontal" Width="999px" BorderStyle="Groove"
BorderWidth="2px">
<table style="border-color:red; border-width:thick; height:100%" >
<tr valign="top">
<td valign="top" style="height:100%; border-width:thick; background-color:Green">
<telerik:RadScheduler runat="server" ID="RadScheduler2" SelectedDate="2010-01-01"
Width="500px" SelectedView="MonthView" ShowHeader="true" ShowViewTabs="false"
ShowNavigationPane="false" ShowFooter="false" AllowEdit="false" AllowInsert="false"
AllowDelete="false" OnClientNavigationCommand="OnClientNavigationCommand"
OnAppointmentCreated="RadScheduler_OnAppointmentCreated"
OverflowBehavior="Expand" MonthView-AdaptiveRowHeight="True"
Height="100px">
<MonthView VisibleAppointmentsPerDay="20" AdaptiveRowHeight="true" />
</telerik:RadScheduler>
</td>
<td style="height:100%; border-width:thick; background-color:Green">
<telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedDate="2010-02-01"
Width="500px" SelectedView="MonthView" ShowHeader="true" ShowViewTabs="false"
ShowNavigationPane="false" ShowFooter="false" AllowEdit="false" AllowInsert="false"
AllowDelete="false" OnClientNavigationCommand="OnClientNavigationCommand"
OnAppointmentCreated="RadScheduler_OnAppointmentCreated"
OverflowBehavior="Expand" MonthView-AdaptiveRowHeight="true"
Height="100%" style="top: 0px; left: 0px">
<MonthView VisibleAppointmentsPerDay="20" AdaptiveRowHeight="true" />
</telerik:RadScheduler>
</td>
<td >
<telerik:RadScheduler runat="server" ID="RadScheduler3" SelectedDate="2010-03-01"
Width="500px" SelectedView="MonthView" ShowHeader="true" ShowViewTabs="false"
ShowNavigationPane="false" ShowFooter="false" AllowEdit="false" AllowInsert="false"
AllowDelete="false" OnClientNavigationCommand="OnClientNavigationCommand"
OnAppointmentCreated="RadScheduler_OnAppointmentCreated"
OverflowBehavior="Expand" Height="100%">
<MonthView VisibleAppointmentsPerDay="20" AdaptiveRowHeight="true" />
</telerik:RadScheduler>
</td>
<td style="height:100%; border-width:thick; background-color:Green">
<telerik:RadScheduler runat="server" ID="RadScheduler4" SelectedDate="2010-04-01"
Width="500px" SelectedView="MonthView" ShowHeader="true" ShowViewTabs="false"
ShowNavigationPane="false" ShowFooter="false" AllowEdit="false" AllowInsert="false"
AllowDelete="false" OnClientNavigationCommand="OnClientNavigationCommand"
OnAppointmentCreated="RadScheduler_OnAppointmentCreated"
OverflowBehavior="Expand" Height="100px">
<MonthView VisibleAppointmentsPerDay="20" AdaptiveRowHeight="true" />
</telerik:RadScheduler>
</td>
</tr>
</table>
</div>
</asp:Panel>
</form>
</
body>
</
html>
CS file
--------------------------------------------------------
namespace
Scheduler
{
public partial class _Default : System.Web.UI.Page
{
private const string ProviderSessionKey = "Telerik.Web.Examples.Scheduler.MultipleInstances.DefaultCS";
// You can safely ignore this method.
// Its purpose is to limit the changes to the underlying data only to the active user session.
protected void Page_Init(object sender, EventArgs e)
{
XmlSchedulerProvider provider;
if ((Session[ProviderSessionKey] == null) || (!IsPostBack))
{
provider =
new XmlSchedulerProvider(
Server.MapPath(
"~/App_Data/MultipleInstances.xml"), false);
Session[ProviderSessionKey] = provider;
}
else
{
provider = (
XmlSchedulerProvider)Session[ProviderSessionKey];
}
RadScheduler2.Provider = provider;
RadScheduler1.Provider = provider;
RadScheduler3.Provider = provider;
RadScheduler4.Provider = provider;
//RadScheduler2.Height = RadScheduler1.Height;
//RadScheduler3.Height = RadScheduler1.Height;
//RadScheduler4.Height = RadScheduler1.Height;
//RadScheduler4.Height = Unit.Pixel(150);
}
private void Page_Load(object sender, EventArgs e)
{
//RadScheduler2.Height = RadScheduler1.Height;
//RadScheduler3.Height = RadScheduler1.Height;
//RadScheduler4.Height = RadScheduler1.Height;
//RadScheduler4.Height = Unit.Pixel(150);
}
protected void RadScheduler_OnAppointmentCreated(object sender, AppointmentCreatedEventArgs e)
{
switch (e.Appointment.Attributes["type"])
{
case "1":
e.Appointment.CssClass =
"rsCategoryBlue";
break;
case "2":
e.Appointment.CssClass =
"rsCategoryViolet";
break;
case "3":
e.Appointment.CssClass =
"rsCategoryRed";
break;
case "4":
e.Appointment.CssClass =
"rsCategoryOrange";
break;
case "5":
e.Appointment.CssClass =
"rsCategoryGreen";
break;
case "6":
e.Appointment.CssClass =
"rsCategoryPink";
break;
case "7":
e.Appointment.CssClass =
"rsCategoryYellow";
break;
case "8":
e.Appointment.CssClass =
"rsCategoryDarkRed";
break;
case "9":
e.Appointment.CssClass =
"rsCategoryDarkGreen";
break;
case "10":
e.Appointment.CssClass =
"rsCategoryDarkBlue";
break;
default:
e.Appointment.CssClass =
"rsCategoryBlue";
break;
}
}
}
}
1 Answer, 1 is accepted
We will be glad to help you, but please either send us a live url or assemble a simple working demo of the issue and send it via a support ticket.
Regards,
Peter
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.