Closing RadWindow with Button in AjaxPanel (or RadAjaxManager)

1 Answer 87 Views
Ajax Window
Richard
Top achievements
Rank 1
Richard asked on 28 Oct 2021, 11:45 AM

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

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 01 Nov 2021, 04:45 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Richard
Top achievements
Rank 1
commented on 16 Dec 2021, 01:21 PM

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
Telerik team
commented on 20 Dec 2021, 02:19 PM

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);
    }

Tags
Ajax Window
Asked by
Richard
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or