Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Window Re-Appears After Closing

7 Answers 135 Views
Window
This is a migrated thread and some comments may be shown as answers.
bob
Top achievements
Rank 1
bob asked on 26 Sep 2011, 10:45 PM
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);
}

7 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 27 Sep 2011, 08:02 AM
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.
0
bob
Top achievements
Rank 1
answered on 27 Sep 2011, 03:29 PM
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?

0
Marin Bratanov
Telerik team
answered on 28 Sep 2011, 11:07 AM
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
0
bob
Top achievements
Rank 1
answered on 28 Sep 2011, 03:38 PM
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);
        }
    }
}



0
Marin Bratanov
Telerik team
answered on 30 Sep 2011, 04:14 PM
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
0
Alan T
Top achievements
Rank 1
answered on 06 Oct 2011, 11:24 AM
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
0
Marin Bratanov
Telerik team
answered on 07 Oct 2011, 02:36 PM
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
Tags
Window
Asked by
bob
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
bob
Top achievements
Rank 1
Marin Bratanov
Telerik team
Alan T
Top achievements
Rank 1
Share this question
or