RadAjaxLoadingPanel with RadPrompt

4 posts, 0 answers
  1. Marcel
    Marcel avatar
    37 posts
    Member since:
    Aug 2008

    Posted 27 Dec 2017 Link to this post

    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>
  2. Marcel
    Marcel avatar
    37 posts
    Member since:
    Aug 2008

    Posted 27 Dec 2017 in reply to Marcel Link to this post

    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

     

  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3954 posts

    Posted 28 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Marcel
    Marcel avatar
    37 posts
    Member since:
    Aug 2008

    Posted 29 Dec 2017 in reply to Marin Bratanov Link to this post

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

     

     

     

Back to Top