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

Telerik Control is displaying the Scheduler control over the panel when IE is set to IE8 Compatibility mode

1 Answer 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
govind r
Top achievements
Rank 1
govind r asked on 04 Jun 2010, 02:05 AM
Hi All,

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

Sort by
0
Peter
Telerik team
answered on 09 Jun 2010, 10:44 AM
Hello govind r,

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.
Tags
Grid
Asked by
govind r
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or