Closing RadWindow with Button in AjaxPanel (or RadAjaxManager)

[Richard]

I have a page with a popup RadWindow. In the RadWindow, users fill out a simple form and click on an OK button. The processing takes several seconds and sometimes users click on the OK button again. I am trying to find a way of disabling the OK button in javascript while the process runs, if the button is not in a RadAjaxPanel or one of the controls in a RadAjaxManager, the button does not change when it is disabled. When the button is n a RadAjaxPanel or one of the controls in a RadAjaxManager, I can't close the RadWindow.

I would think this is a pretty frequent issue. Anyone have any ideas? If you know of sample code that solves this I would really appreciate it!

Thanks

[Vessy]

Hi Richard,

You can achieve the desired behavior by wrapping the content of RadWindow inside AjaxPanel, so the loading overlay will cover the "OK" button until the Ajax update is finished. You can close the RadWindow from the serve-side after that by using a similar approach: 

https://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server

For example:

<script type="text/javascript">
            function showWindow() {
                $find("<%=RadWindow1.ClientID%>").show();

            }
            function closeWindow() {
                $find("<%=RadWindow1.ClientID%>").close();
            }
        </script>

 <telerik:RadButton ID="RadButton2" runat="server" Text="Show" AutoPostBack="false" OnClientClicked="showWindow"></telerik:RadButton>

 <telerik:RadWindow ID="RadWindow1" runat="server" Modal="true" Behaviors="Close" Height="400px"Width="600px">
 <ContentTemplate>
 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
 <p>You will need to click the OK button below in order to close this pop-up.</p>
 <telerik:RadButton ID="RadButton1" runat="server" Text="OK" OnClick="RadButton1_Click"></telerik:RadButton>
 </telerik:RadAjaxPanel>
 <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
 </telerik:RadAjaxLoadingPanel>
 </ContentTemplate>
 </telerik:RadWindow>

    protected void RadButton1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000); //to simulate longer AJAX update
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "closeWindow();", true);
    }

Regards,
Vessy
Progress Telerik

[Richard]

Sorry about the delay, but I got pulled off of this issue.

My solution is a bit more complicated in that I have a RadAjaxPanel on both the page and the popup. If I keep the OK button on the popup outside of the AjaxPanel, it works fine, but I can't disable the button. If I put the OK button inside the AjaxPanel, the javascript is not handled properly and the popup never closes.

I have attached a solution that demonstrates the problem. I would really appreciate any guidance you can give me.

[Vessy]

Hi Richard,

Thanks a lot for the provided project. The problem is cause by the ClientScript call of the CloseAndRebind() function which is not executed when the button is placed inside an update panel. Registering the script trough the script manager will allow you to call the function successfully:

    protected void OnOK(object sender, EventArgs e)
    {
        //System.Threading.Thread.Sleep(2000); //to simulate longer AJAX update
        //ClientScript.RegisterStartupScript(Page.GetType(), "key", "CloseAndRebind();", true);
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "CloseAndRebind();", true);
    }