Closing Dock Triggers 'Compatibility Mode', Refreshes Page

6 posts, 0 answers
  1. Richard Weeks
    Richard Weeks avatar
    95 posts
    Member since:
    Oct 2009

    Posted 02 Dec 2010 Link to this post

    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">
    <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

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 07 Dec 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richard Weeks
    Richard Weeks avatar
    95 posts
    Member since:
    Oct 2009

    Posted 07 Dec 2010 Link to this post

    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

  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 08 Dec 2010 Link to this post

    Hi Richard,

    Thank you for useful information!

    It will help us when resolving similar issues of other customers. We will research why is this happening.

    Greetings,
    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.
  6. Richard Weeks
    Richard Weeks avatar
    95 posts
    Member since:
    Oct 2009

    Posted 09 Mar 2011 Link to this post

    Hi, I haven't forgotten about this but really busy with project deadlines, etc. I plan on returning to this at some future point.

    Richard
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 15 Mar 2011 Link to this post

    Hello Richard,

    We researched the issue, but couldn't find the reason why is it happening. I have applied both global styles to a sample page with RadDock controls on it, but didn't reproduce the problem locally.
    In general it is not a good idea to use global styles together with our RadControls, because the global selectors might break the control's functionality and appearance.

    Regards,
    Pero
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017