Closing radwindow after server side code has executed within RadWindow.

[Greg]

I have a button that opens a RadWidow that has it's NavigateUrl set to another .Net page in my project.

Basically the loaded page has a user fill in a form and click on a submit button that does some code behind processing and submission. I would then like to have the RadWindow automaticall close after submission. How could I do this?

[Princy]

Hello Greg,

You can try the following code snippet.

C#:

protected void Button1_Click(object sender, EventArgs e)
{
  //server code
  ScriptManager.RegisterStartupScript(this, GetType(), "close", "CloseModal();", true);
}

JS:

<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()
 {
  // GetRadWindow().close();
  setTimeout(function ()
  {
       GetRadWindow().close();
  }, 0);
 }
</script>

Thanks,
Princy.

[Tim Barton]

Hi,

If you have RadAjaxManager on your page you can call the following:

RadAjaxManager1.ResponseScripts.Add("CloseModal();") 

A little bit less typing :)

Tim

[Joel R]

In trying the above I get the following error in IE 11 but not Chrome.  The error occurs right after the modal window is closed. 

Unhandled exception at line 324, column 25 in http://localhost:51522/LocationNew.aspx?rwndrnd=0.8602546546901856

0x800a138f - JavaScript runtime error: Unable to get property 'Application' of undefined or null reference




A snippet from the debuger
CloseModal();Sys.Application.initialize();

telerik version 2012.3.1016.35


Any thoughts would be appreciated.

[Princy]

Hi,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadWindow runat="server" ID="RadWindow1">
    <ContentTemplate>
        <telerik:RadButton ID="RadButton1" runat="server" Text="CloseWindow" OnClick="RadButton1_Click">
        </telerik:RadButton>
    </ContentTemplate>
</telerik:RadWindow>
<asp:Button ID="Button1" Text="show the RadWindow" runat="server" OnClientClick="showWin(); return false;" />

C#:

protected void RadButton1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, GetType(), "close", "CloseModal();", true);
}

JavaScript:

<script type="text/javascript">
    function showWin() {
        $find("RadWindow1").show();
    }
    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 oWnd = GetRadWindow();
        if (oWnd) oWnd.close();
    }
</script>

Let me know if you have any concern.
Thanks,
Princy,

[Marin Bratanov]

Hello guys,

You can also try adding a small timeout around close:

function CloseModal() {
    var oWnd = GetRadWindow();
    if (oWnd) setTimeout(function(){oWnd.close();}, 0);
}

You can also consider using the Sys.Application.Load event to register the script to let the page finish processing before closing it. This may be needed if DestoryOnClose is set to true so that it disposes. If it is not needed you can set it to false which is likely to alleviate the issue.

Regards,
Marin Bratanov
Telerik

[Joel R]

perfect.... Thanks Marin

[Ahmed]

Simple way to force closing rad window, just put it inside update panel like that :
<asp:UpdatePanel ID="uppChangeHallPriceWindow" runat="server" UpdateMode="Conditional" RenderMode="Block">
  <ContentTemplate>
     <telerik:RadWindow ID="RadWindow1" runat="server">
       <ContentTemplate>
                                        
       </ContentTemplate>
    </telerik:RadWindow>
  </ContentTemplate>
</asp:UpdatePanel>
Important: you have to apply this properties to the update panel :
 UpdateMode="Conditional" RenderMode="Block"

then inside the button you want to execute the close command perform :
updatepanel1.update()
this command will close radwindow and no refresh to your Webpage and no need to javascript, I tried it.

[Ahmed]

Simple way to force closing rad window, just put it inside update panel like that :
<asp:UpdatePanel ID="uppChangeHallPriceWindow" runat="server" UpdateMode="Conditional" RenderMode="Block">
  <ContentTemplate>
     <telerik:RadWindow ID="RadWindow1" runat="server">
       <ContentTemplate>
                                        
       </ContentTemplate>
    </telerik:RadWindow>
  </ContentTemplate>
</asp:UpdatePanel>
Important: you have to apply this properties to the update panel :
 UpdateMode="Conditional" RenderMode="Block"

then inside the button you want to execute the close command perform :
updatepanel1.update()
this command will close radwindow and no refresh to your Webpage and no need to javascript, I tried it.

[Marin Bratanov]

Hi Ahmed,

I would generally advise against such an approach. Please review the following articles on the matter:

• using RadWindow with AJAX and why you should avoid such an update panel, unless absolutely necessary (and why it has the effect of closing the RadWindow): http://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/how-to-use-radwindow-with-ajax.
• how to open a RadWIndow from the server code (and, thus, how to close it - just replace the call to show() with close()): http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server.

Regards,
Marin Bratanov
Telerik by Progress

[Kiran]

Worked best, especially with regards to the time it took to close. Worked same as closing the window. 

Thank you.