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

Closing Dock Triggers 'Compatibility Mode', Refreshes Page

5 Answers 96 Views

Dock

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

Richard Weeks asked on 03 Dec 2010, 01:11 AM

Hi, I created a simple Dock to pass messages back but when the close icon in the dock is clicked IE8 triggers compatibility mode and reloads the page. After that I can refresh the page and everything works. It is only on the first page load the issue presents itself.

Here is my code, first the Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="Web.App_Templates.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title><Page Title</title>

<telerik:RadStyleSheetManager id="TelerikStyleSheetManager" runat="server" />

<asp:ContentPlaceHolder ID="HeadContentPlaceHolder" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<form id="MainForm" runat="server">

<telerik:RadScriptManager ID="TelerikScriptManager" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<asp:ContentPlaceHolder ID="ScriptContentPlaceHolder" runat="server">

</asp:ContentPlaceHolder>

<telerik:RadAjaxManager ID="TelerikAjaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="TelerikDock"></telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadSkinManager ID="TelerikSkinManager" Runat="server" Skin="Telerik">

</telerik:RadSkinManager>

<telerik:RadWindowManager ID="TelerikWindowManager" runat="server">

<Windows>

<telerik:RadWindow ID="TelerikWindow" runat="server">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<telerik:RadFormDecorator ID="TelerikFormDecorator" Runat="server" Skin="Telerik" DecoratedControls="All" />

<asp:UpdatePanel

ID="MainUpdatePanel"

runat="server">

<ContentTemplate>

<telerik:RadDockLayout

runat="server"

ID="TelerikDockLayout"

Visible="false">

<telerik:RadDockZone ID="TelerikDockZone" runat="server" Orientation="Horizontal" MinHeight="20px" BorderWidth="0">

<telerik:RadDock ID="TelerikDock" runat="server" Title="Informational Message" Width="100%" EnableAnimation="true" EnableRoundedCorners="true" Resizable="true">

<ContentTemplate>

<asp:Literal

ID="Feedback"

runat="server"

Text=" " />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

<asp:ContentPlaceHolder

ID="MainContentPlaceHolder"

runat="server">

</asp:ContentPlaceHolder>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

Master page code behind (simplified):

namespace Web.App_Templates

{

using System;

using System.Web.UI;

public partial class Site : MasterPage

{

public void ShowFeedback(string feedBackText, bool useAlert)

{

if (feedBackText == string.Empty)

{

this.Feedback.Text = feedBackText;

this.TelerikDock.Title = feedBackText;

this.TelerikDockLayout.Visible = false;

}

else

{

if (useAlert)

{

var radAlertScript =

string.Format(

"function f(){{radalert('{0}', 330, 210);Sys.Application.remove_load(f);}};Sys.Application.add_load(f);",

feedBackText);

ScriptManager.RegisterStartupScript(

Page,

Page.GetType(),

"Feedback",

radAlertScript,

true);

}

else

{

this.Feedback.Text = feedBackText;

this.TelerikDockLayout.Visible = true;

}

public void ShowFeedback(string feedbackTitle, string feedBackText, bool useAlert)

{

if (feedBackText == string.Empty)

{

this.Feedback.Text = feedBackText;

this.TelerikDock.Title = feedBackText;

this.TelerikDockLayout.Visible = false;

}

else

{

if (useAlert)

{

var radAlertScript =

string.Format(

"function f(){{radalert('{0}', 330, 210, '{1}');Sys.Application.remove_load(f);}};Sys.Application.add_load(f);",

feedBackText,

feedbackTitle);

ScriptManager.RegisterStartupScript(

Page,

Page.GetType(),

"Feedback",

radAlertScript,

true);

}

else

{

this.Feedback.Text = feedBackText;

this.TelerikDock.Title = feedbackTitle;

this.TelerikDockLayout.Visible = true;

}

(bear with me :) Content Page:

<%@ Page Title="Home" Language="C#" MasterPageFile="~/App_Templates/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>

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

<%@ MasterType VirtualPath="~/App_Templates/Site.Master" %>

<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">

</asp:Content>

<asp:Content ID="ScriptContent" ContentPlaceHolderID="ScriptContentPlaceHolder" runat="server">

</asp:Content>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

</asp:Content>

...and finally, the content page code behind (again simplified):

namespace Web

{

using System;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

this.Master.ShowFeedback("Test Title", "Test normal feedback message.", false);

// this.Master.ShowFeedback( "Test Title", "Test pop-up feedback message.",true);

}

Everything works fine, there are no errors (client or server) but when I click close, that is when the compatibility view triggers and the page reloads (displaying the messages again).

Can anyone tell me what the issue is? I'll admit my experience of using Dock is minimal, so hopefully it's something stupid simple :)

Thanks in advance,
Richard

5 Answers, 1 is accepted

answered on 07 Dec 2010, 11:59 AM

master.zip

Hello Richard,

This is a really strange issue and I can't tell what is causing it. It might be even not related to our controls. I managed to run the code locally, but was not able to reproduce the issue. Here is a video captured while running the application: http://www.screencast.com/users/metalmkd/folders/Jing/media/3e9cc357-8e64-494c-99c6-978db22d4108.
The test project that I tested is attached to the thread. Could you please test it and see if you can observe the problem? Please modify so the problem can be seen and sent it back.

Kind regards,
Pero
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 08 Dec 2010, 01:57 AM

Oh my god but this turned into an epic case of detective work.

I use the Yahoo User Interface (YUI) library, specifically, the Reset, Fonts and Base stylesheets. They are great for providing a predicatable level playing ground.

I have discovered the following YUI stylesheets cause the page to refresh to compatibility mode on the first visit (and the first visit only!) only (so far) when using a dock and attempting to close it.

In css base:

ul li{list-style:disc outside;}

And in css reset:

li {list-style:none;}

Removing those two styles fixes the problem (no issue for us).

Mad... But I got it. Hopefully of interest to you if you are bored one Friday afternoon ;)

Richard