Window Re-Appears After Closing

8 posts, 0 answers
  1. bob
    bob avatar
    4 posts
    Member since:
    Jun 2006

    Posted 26 Sep 2011 Link to this post

    I'm facing an issue with the RadWindow control. If you attempt to drag the window during a postback and the server-side code attempts to close the window via script, the window closes and then re-appears. When the window re-appears, you are not able to close this window using the "X" icon.

    Telerik Version: 2011.1.413.40.

    Steps to Reproduce:
    1. Click "Open Dialog" button.
    2. Click "Submit" button in the window. This issues a Thread.Sleep(5000) in the Submit button click event to simulate a long-running task. 
    3. While the window is posting-back, drag the window around.
    4. The window will close, via script from the server-side postback using ScriptManager.RegisterStartupScript to close the window using javascript similar to: "var radWindow = GetRadWindow(); radWindow.close();". 
    5. Observe that the window re-appears.
    6. Now, attempt to close the window. You cannot close this dialog.

    Default.aspx Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <script src="scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <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>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadWindowManager ID="WindowManager" runat="server" Behaviors="Move,Close,Resize" DestroyOnClose="true" KeepInScreenBounds="true" Modal="true" ReloadOnShow="true" ShowContentDuringLoad="false" VisibleStatusbar="false">
            <Windows>
                <telerik:RadWindow ID="DialogWindow" OpenerElementID="OpenDialogButton" NavigateUrl="Dialog.aspx" runat="server" Width="650px" Height="450px">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
     
        </telerik:RadAjaxManager>
        <div>
        <h1>Test Window Drag Issue</h1>
        <ol>
            <li>1. Click "Open Dialog".</li>
            <li>2. Click "Submit" button in the window. This issues a Thread.Sleep(5000) to simulate a long-running task.</li>
            <li>3. While the window is posting-back, drag the window around.</li>
            <li>4. The window will close, via script from the server-side postback. And then the window will re-appear.</li>
            <li>5. Now, attempt to close the window. You cannot close this dialog.</li>
        </ol>
        <p>Click "Open Dialog" button.</p>
        <asp:Button ID="OpenDialogButton" runat="server" Text="Open Dialog" />
        </div>
        </form>
    </body>
    </html>

    Dialog.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dialog.aspx.cs" Inherits="RadControls_WindowIssue.Dialog" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <script src="scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager2" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxPanel id="AjaxPanel1" LoadingPanelID="LoadingPanel1" runat="server">
            <h1>Dialog Page</h1>
            <p>A sample dialog to illustrate the issue.</p>
            <ol>
                <li>1. Click the Submit button.</li>
                <li>2. The postback event has a Thread.Sleep(5000) - 5 seconds. Then, the server-side code issues a close window script.</li>
                <li>3. While the page is in the middle of a post-back, drag the Window.</li>
                <li>4. Observe that when the window closes, it opens back up and is visible. However, now you cannot close the dialog.</li>
            </ol>
            <asp:Button id="SubmitButton" runat="server" Text="Submit" OnClick="SubmitClick" />
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" Skin="Default" runat="server" />
        </form>
    </body>
    </html>

    Dialog.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace RadControls_WindowIssue
    {
        public partial class Dialog : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
     
            protected void SubmitClick(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(5000);
     
                ScriptManager.RegisterStartupScript(this, GetType(), "close", "CloseModal();", true);
            }
        }
    }

    scripts.js
    function GetRadWindow() {
        var oWindow = null;
        if (window.radWindow)
            oWindow = window.radWindow;
        else if (window.frameElement && window.frameElement.radWindow)
            oWindow = window.frameElement.radWindow;
     
        return oWindow;
    }
    function CloseModal() {
        var radWindow = GetRadWindow();
        radWindow.close(returnValue);
    }

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Sep 2011 Link to this post

    Hello Bob,

    I have tried the same code and that that throws an error 'Sys' is undefined at my end while closing the window. so I tried using the following code for closing the window and that worked as expected.

    Javascript:
    function CloseModal()
    {
        setTimeout(function () {
            GetRadWindow().close();
        }, 0);
    }

    Thanks,
    Princy.
  3. bob
    bob avatar
    4 posts
    Member since:
    Jun 2006

    Posted 27 Sep 2011 Link to this post

    Thank you for your reply. However, I'm not concerned about the CloseModal script as I've copied and pasted this function into this forum thread because you cannot attach zip files containing the actual project.

    But, Did you try dragging the window while the window was closing? Did you see the issue I am facing?

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4889 posts

    Posted 28 Sep 2011 Link to this post

    Hello Ryan,

    I also tested your code and I was not able to replicate your behavior. What I can confirm is that there is an issue when you inject a call to the RadWindow's close() method from the code-behind and the DestroyOnClose property is set to true. This happens under IE9 only, as it changed a lot of the behaviors of the iframes and what we have found so far is that iframes do not dispose properly in this browser.

    Your code results in the Sys is undefined error, just as Princy reported, and once a JavaScript error occurs on the page there is no guarantee how the page will function after that. For one thing - scripts are no longer executed and therefore you would, indeed, have no way to close the RadWindow.

    The way to work around this IE9 bug is to either set the DestroyOnClose property to false, or to use the timeout:
    setTimeout(function ()
    {
        radWindow.close(returnValue);
    }, 0);


    You can find a video from my experiment here: http://screencast.com/t/aMDwf46ry. Note that the error is not present in IE8 for example and that the timeout resolved it, which allows the RadWindow to be closed at will.


    Kind regards,
    Marin
    the Telerik team
    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 their blog feed now
  5. bob
    bob avatar
    4 posts
    Member since:
    Jun 2006

    Posted 28 Sep 2011 Link to this post

    Thank you for the video. It was very helpful because I can see that I'm not explaining my issue clear enough. I have recorded a video as well for you to see. Also I am including my updated code as well. I included your recommendation for the setTimeout in the CloseModal script.

    Here is the link to my screencast: http://screencast.com/t/fxLrEIatjXV4

    In the video, after I click the Submit button on the Dialog.aspx, I then click and drag the window while the page is in a post-back and I do not release the window drag until after the window closes. You'll notice that the window re-appears after its been closed. I then attempt to close the window with the "X" in the upper right-hand corner. I am not able to close the window. Then, I attempt to "Submit" the dialog.aspx again hoping that my "CloseModal" script method will close the dialog. The window does not close.

    My issue is not related to IE 9. I can duplicate the issue in IE7, IE8, and Google Chrome (14.0). I didn't try Firefox.

    Here is my updated code.

    Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
        <script src="scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <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>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadWindowManager ID="WindowManager" runat="server" Behaviors="Move,Close,Resize" KeepInScreenBounds="true" Modal="true" ReloadOnShow="true" ShowContentDuringLoad="false" VisibleStatusbar="false">
            <Windows>
                <telerik:RadWindow ID="DialogWindow" OpenerElementID="OpenDialogButton" NavigateUrl="Dialog.aspx" runat="server" Width="650px" Height="450px">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
     
        </telerik:RadAjaxManager>
        <div>
        <h1>Test Window Drag Issue</h1>
        <ol>
            <li>1. Click "Open Dialog".</li>
            <li>2. Click "Submit" button in the window. This issues a Thread.Sleep(5000) to simulate a long-running task.</li>
            <li>3. While the window is posting-back, drag the window around.</li>
            <li>4. The window will close, via script from the server-side postback. And then the window will re-appear.</li>
            <li>5. Now, attempt to close the window. You cannot close this dialog.</li>
        </ol>
        <p>Click "Open Dialog" button.</p>
        <asp:Button ID="OpenDialogButton" runat="server" Text="Open Dialog" />
        </div>
        </form>
    </body>
    </html>

    Dialog.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dialog.aspx.cs" Inherits="RadControls_WindowIssue.Dialog" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager2" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxPanel id="AjaxPanel1" LoadingPanelID="LoadingPanel1" runat="server">
            <h1>Dialog Page</h1>
            <p>A sample dialog to illustrate the issue.</p>
            <ol>
                <li>1. Click the Submit button.</li>
                <li>2. The postback event has a Thread.Sleep(5000) - 5 seconds. Then, the server-side code issues a close window script.</li>
                <li>3. While the page is in the middle of a post-back, drag the Window.</li>
                <li>4. Observe that when the window closes, it opens back up and is visible. However, now you cannot close the dialog.</li>
            </ol>
            <asp:Button id="SubmitButton" runat="server" Text="Submit" OnClick="SubmitClick" />
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" Skin="Default" runat="server" />
        <script type="text/javascript">
            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow)
                    oWindow = window.radWindow;
                else if (window.frameElement && window.frameElement.radWindow)
                    oWindow = window.frameElement.radWindow;
     
                return oWindow;
            }
            function CloseModal(command) {
                var radWindow = GetRadWindow();
                setTimeout(function () {
                    radWindow.close();
                }, 0);
            }
        </script>
        </form>
    </body>
    </html>

    Dialog.aspx.cs
    using System;
    using System.Web.UI;
     
    namespace RadControls_WindowIssue
    {
        public partial class Dialog : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
     
            protected void SubmitClick(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(5000);
     
                ScriptManager.RegisterStartupScript(this, GetType(), "close", "CloseModal('Success');", true);
            }
        }
    }



  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4889 posts

    Posted 30 Sep 2011 Link to this post

    Hi Ryan,

    Thank you for the screen capture and the code. I was able to reproduce your issue and I am logging it in our database for research, but I cannot provide an estimate when a fix will be available. I have also updated your Telerik points as a token of gratitude for your efforts.


    Greetings,
    Marin
    the Telerik team
    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 their blog feed now
  7. Alan T
    Alan T avatar
    125 posts
    Member since:
    Apr 2010

    Posted 06 Oct 2011 Link to this post

    Add the Close function to the 'ResponseScripts' of your RadAjaxPanel.

    I've found this is the best way to close a radwindow server side on an ajaxified page.

    Alan
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4889 posts

    Posted 07 Oct 2011 Link to this post

    Hi guys,

    You can also check if the RadWindow is already closed in the OnClientDragEnd event and if so - make sure its popup element is hidden:
    function OnClientDragEnd(sender, args)
    {
        if (sender.isClosed())
        {
            sender._popupBehavior.hide();
        }
    }

    Where this function is, of course, attached to the OnClientDragEnd event of the RadWindowManager.

    All the best,
    Marin
    the Telerik team
    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 their blog feed now
Back to Top