How to open Telerik Rad Pop Up window Asynchronously?

Question

I am opening a Telerik RadWindowManager Pop up. There is a long Database operation to be performed. During loading ie approximately for 35-40 seconds, for the moment, I keep on waiting until the process will come to an end.

Is there any way to load the design first and show a Loader / progress bar to inform the user to wait...Actually the problem gets worse when the Internet speed is slow...

Any suggestion....

Answer 1

Here I have a good example. See here for demo.

aspx file:

<telerik:RadScriptManager id="ScriptManager1" runat="server" />

 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"/>
 <p>
   Press the submit button in order to start monitoring custom progress
 </p>
 <asp:button ID="buttonSubmit" runat="server" Text="Submit" OnClick="buttonSubmit_Click" CssClass="RadUploadButton" />

 <telerik:RadProgressManager id="Radprogressmanager1" runat="server" />

 <telerik:RadProgressArea id="RadProgressArea1" runat="server" />

aspx.cs file:

    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!IsPostBack)
        {
            //Do not display SelectedFilesCount progress indicator.
            RadProgressArea1.ProgressIndicators &= ~ProgressIndicators.SelectedFilesCount;
        }

        RadProgressArea1.Localization.Uploaded = "Total Progress";
        RadProgressArea1.Localization.UploadedFiles = "Progress";
        RadProgressArea1.Localization.CurrentFileName = "Custom progress in action: ";
    }

    protected void buttonSubmit_Click(object sender, System.EventArgs e)
    {
        UpdateProgressContext();
    }

    private void UpdateProgressContext()
    {
        const int total = 100;

        RadProgressContext progress = RadProgressContext.Current;
        progress.Speed = "N/A";

        for (int i = 0; i < total; i++)
        {
            progress.PrimaryTotal = 1;
            progress.PrimaryValue = 1;
            progress.PrimaryPercent = 100;

            progress.SecondaryTotal = total;
            progress.SecondaryValue = i;
            progress.SecondaryPercent = i;

            progress.CurrentOperationText = "Step " + i.ToString();

            if (!Response.IsClientConnected)
            {
                //Cancel button was clicked or the browser was closed, so stop processing
                break;
            }

            progress.TimeEstimated = (total - i) * 100;
            //Stall the current thread for 0.1 seconds
            System.Threading.Thread.Sleep(100);
        }
    }    

Now it should be easier to integrate your code.

EDIT: To trigger your Database operation after setting up your RadProgressArea in the PageLoad, you'll need some ajax call to be made after first page load (So I just added the RadAjaxManager to the ascx file upper). Use this code to trigger your DataBase call:

javascript:

 function pageLoad(sender, eventArgs) {
     if (!eventArgs.get_isPartialLoad()) {
         $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("StartDBOperation");
     }
 }    

ascx.cs file:

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        if (e.Argument == "StartDBOperation")
        {
            // Start DB operation here..
        }
    }

Answer 2

Still an Alternative below... But not a solution

I can show a loading panel as follows while the content loads

Mark Up

<div id="loading" style=" width: 100px; height: 50px; display: none; 
                                              text-align: center; margin: auto;">
    loading...
</div>
<asp:Button ID="RadButton1" runat="server" 
                 Text="RadButton1" OnClientClick="openRadWnd(); return false;" />
<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
   <Windows>
      <telerik:RadWindow ID="RadWindow1" runat="server" 
               NavigateUrl="url" ShowContentDuringLoad="false"
               OnClientShow="OnClientShow" OnClientPageLoad="OnClientPageLoad">
      </telerik:RadWindow>
   </Windows>
</telerik:RadWindowManager>

JavaScript

<script type="text/javascript">
    var loadingSign = null;
    var contentCell = null;
    function openRadWnd() {
        $find("<%=RadWindow1.ClientID %>").show();
    }
    function OnClientShow(sender, args) {
        loadingSign = $get("loading");
        contentCell = sender._contentCell;
        if (contentCell && loadingSign) {
            contentCell.appendChild(loadingSign);
            contentCell.style.verticalAlign = "middle";
            loadingSign.style.display = "";
        }
    }
    function OnClientPageLoad(sender, args) {
        if (contentCell && loadingSign) {
            contentCell.removeChild(loadingSign);
            contentCell.style.verticalAlign = "";
            loadingSign.style.display = "none";
        }
    }
</script>

Answer 3

Open the RadWindow with JavaScript on the client, set the desired URL through JavaScript. Performa partial postbacks that do not dispose the RadWindow. If you obtain the URL on the server only - use the same logic, but show the loading sign initially, when the response is done call a script to change the URL of the RadWIndow again. http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-javascript-from-server-side.html http://www.telerik.com/help/aspnet-ajax/window-programming-radwindow-methods.html