RadAjaxLoadingPanel with RadPrompt

[Marcel]

Hello,

I am using a RadPrompt window to accept some basic information, which I then pass back to the server for a lengthy task. I am using the  __doPostBack method to post the RadPrompt results to the server. I want to invoke the RadAjaxLoadingPanel to show I am busy while the server task completes and posts the results. My code is not working - I do not see the "loading" panel. The RadPrompt works fine, passing the desired result to the server. How can I make the RadAjaxLoadingPanel appear?

I have attached an image of the ascx code. Note that RadAjaxLoadingPanel1 and RadAjaxPanel1 are defined in code behind of the parent web part and work when other controls are pressed.

Code that defines RadAjaxLoadingPanel1 and RadAjaxPanel1

01.RadAjaxLoadingPanel radAjaxLoadingPanel = new RadAjaxLoadingPanel();
02.radAjaxLoadingPanel.ID = "RadAjaxLoadingPanel1";
03.radAjaxLoadingPanel.Skin = "Windows7";
04.radAjaxLoadingPanel.MinDisplayTime = 500;
05.radAjaxLoadingPanel.Transparency = 30;
06.
07.Controls.Add(radAjaxLoadingPanel);
08.
09._radAjaxPanel = new RadAjaxPanel();
10._radAjaxPanel.ID = "RadAjaxPanel1";
11._radAjaxPanel.LoadingPanelID = "RadAjaxLoadingPanel1";
12.
13.// load these controls
14._docSearchUserControl = Page.LoadControl(_ascxPath) as DocSearchUserControl;
15._docSearchUserControl.ID = "DocSearchUserControl";
16._docSearchUserControl.ParentWebPart = this; // add reference to this web part

 

 

JS code that calls RadPrompt and tries to show the RadAjaxLoadingPanel1 over RadAjaxPanel2 (see the attached image to see how RadAjaxPanel2 is defined)

    function ExportFilesRadButton_Clicked(sender, args) {
        //debugger;
        var path = document.getElementById(sender.get_id()).getAttribute("Path"); // Path is set on server

        if (path) {
            OpenFileExportPrompt(path);
        }
    }

    function OpenFileExportPrompt(path) {
        radprompt('Server Path:', FileExportPromptCallBackFn, 330, 100, null, 'Server Target Location', path);
    }

    function FileExportPromptCallBackFn(arg) {
        // alert ("Prompt returned the following result: " + arg);
        //debugger;

        if (arg != null) {
            currentLoadingPanel = $telerik.$("[id$='RadAjaxLoadingPanel1']").get(0).control; // to avoid 'not found' error
            currentUpdatedControl = $find("<%= RadAjaxPanel2.ClientID %>");

            if (currentLoadingPanel && currentUpdatedControl) {
                //alert("controls found");
                //show the loading panel over the updated control
                currentLoadingPanel.show(currentUpdatedControl);
            }
            __doPostBack("FileExportPrompt", arg);
        }
    }
</script>
</telerik:RadCodeBlock>

[Marcel]

Further on my original post: when executing JavaScript: 'currentLoadingPanel.show(currentUpdatedControl);' that is supposed to display the loading panel, I get the following error:

Unhandled exception at line 4233, column 12 in http://devdocs.xxx.com/ScriptResource.axd?d=uUS6JgG1X7I3Dk3qFE8KSweJzpi73fY9XukElOBIPRJqxRScOYwktg5ZTxJgQcs0gVAzJ4mMPCsq4YN8-f5gGiDbYIgLi0mzwBxrrTPgDNSG2Hp5VJbNkRd4PPag9QHB3BTdDoVg_XaUm31r3ka5p_mSwsGessjYe5Ii2E0mad3X8vhOwBJn5XKl3kWiEGF10&t=261bbcce
0x800a139e - JavaScript runtime error: Sys.ArgumentTypeException: Object of type 'Telerik.Web.UI.RadAjaxPanel' cannot be converted to type 'String'.
Parameter name: id

 

[Marin Bratanov]

Hello Marcel,

If you invoke an AJAX request that will be handled by RadAjaxPanel, you do not need to show the loading panel with your own code.

To invoke such a request, you have two options:

• use the UniqueID (name HTML attribute) of a button residing inside the RadAjaxPanel (e.g., __doPostBack("<%=theButton.UniqueID%>", "")). You can see this demo for more details: https://demos.telerik.com/aspnet-ajax/window/examples/confirmserverclicks/defaultcs.aspx. Here is a simple example:
  
  

      <telerik:RadWindowManager runat="server" ID="rwm1"></telerik:RadWindowManager>
      <telerik:RadAjaxLoadingPanel runat="server" ID="ralp1" Skin="Windows7"></telerik:RadAjaxLoadingPanel>
      <telerik:RadAjaxPanel runat="server" ID="rap1" LoadingPanelID="ralp1">
          <asp:Button Text="confirm me" runat="server" ID="Button2" OnClick="Button2_Click" OnClientClick="showConfirmation(this); return false;" />
      </telerik:RadAjaxPanel>
      <telerik:RadCodeBlock runat="server" ID="rcb1">
          <script>
              function showConfirmation(btn) {
                  function confirmCallback(arg) {
                      if (arg) {
                          __doPostBack(btn.getAttribute("name"), "");
                      }
                  }
                  radconfirm("sure?", confirmCallback);
              }
          </script>
      </telerik:RadCodeBlock>
  
  
  protected void Button2_Click(object sender, EventArgs e)
  {
      System.Threading.Thread.Sleep(2000);
      Button2.Text = DateTime.Now.ToString();
  }

• OR, use the ajaxRequest() method RadAjaxPanel offers on the client. Here is a basic example:
  
  

  <telerik:RadWindowManager runat="server" ID="rwm1"></telerik:RadWindowManager>
  <telerik:RadAjaxLoadingPanel runat="server" ID="ralp1" Skin="Windows7"></telerik:RadAjaxLoadingPanel>
  <telerik:RadAjaxPanel runat="server" ID="rap1" LoadingPanelID="ralp1" OnAjaxRequest="rap1_AjaxRequest">
      <asp:Button Text="confirm me" runat="server" ID="Button2" OnClientClick="showConfirmation(); return false;" />
  </telerik:RadAjaxPanel>
  <telerik:RadCodeBlock runat="server" ID="rcb1">
      <script>
          function showConfirmation() {
              radconfirm("sure?", confirmCallback);
          }
  
          function confirmCallback(arg) {
              if (arg) {
                  $find("<%=rap1.ClientID%>").ajaxRequest("fromConfirm");
          }
      }
      </script>
  </telerik:RadCodeBlock>

  protected void rap1_AjaxRequest(object sender, AjaxRequestEventArgs e)
  {
      System.Threading.Thread.Sleep(2000);
      Button2.Text = e.Argument;
  }

Regards,

Marin Bratanov
Progress Telerik

[Marcel]

Hello Marin,

Thank you for your detailed response. It helped me. 

ascx.cs

protected void HiddenExportFilesRadButton_Click(object sender, EventArgs e)
{
    string passedArgument = Request.Params.Get("__EVENTARGUMENT");

    ExportFilesToServer(passedArgument);
}

ascx

    function ExportFilesRadButton_Clicked(sender, args) {
        var path = document.getElementById(sender.get_id()).getAttribute("Path"); // Path is set on server

        if (path) {
            OpenFileExportPrompt(path);
        }
    }

    function OpenFileExportPrompt(path) {
        radprompt('Server Path:', FileExportPromptCallBackFn, 330, 100, null, 'Server Target Location', path);
    }

    function FileExportPromptCallBackFn(arg) {
        if (arg) {
            __doPostBack("<%=HiddenExportFilesRadButton.UniqueID%>", arg);
        }
    }
</script>
</telerik:RadCodeBlock>

and

<td>
    <div runat="server" id="ExportBtnWrapper" class="btn-wrapper">
            <%--a parameter is passed by setting an attrbute on the RadButton e.g. RadButton1.Attributes.Add("Test","YourValue");--%>
        <telerik:RadButton RenderMode="Lightweight" ID="ExportFilesRadButton" runat="server" OnClientClicked="ExportFilesRadButton_Clicked"
            Text="Export Files" ToolTip="Export files to server file system." AutoPostBack="False">
        </telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" ID="HiddenExportFilesRadButton" runat="server" CssClass="invisible" OnClick="HiddenExportFilesRadButton_Click" >
        </telerik:RadButton>
    </div>
</td>
</tr>

CSS:

.invisible
{
    visibility: hidden;
}