[Solved] Hide ProgressArea on ready

[Fit2Page]

Hi,

 

I am monitoring some document processing on the server with RadProgressArea. How could I hide the progressarea on 100% complete?

 

Thanks, Marc

[Rumen]

Hi Marc,

Thank you for reaching out.

Since your description (“monitoring some document processing on the server”) can map to two different scenarios in RadProgressArea, let me cover both. In both cases the recommended hook for dismissing the dialog is the OnClientProgressUpdating event, you only need to detect “100% / finished” and call sender.hide().

Scenario 1: File upload (RadAsyncUpload)

RadProgressArea automatically receives PrimaryPercent, RequestSize, file counters, etc. from the built-in upload progress channel. You just need to react when PrimaryPercent reaches 100.

<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<telerik:RadProgressArea    ID="RadProgressArea1"    runat="server"
    OnClientProgressUpdating="onUploadProgressUpdating" />

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" />

<script>
function onUploadProgressUpdating(sender, args) {
    var data = args.get_progressData();
    if (!data) return;

    if ((data.PrimaryPercent || 0) >= 100) {
        args.set_cancel(true);                    // skip the last visual repaint
        setTimeout(function () { sender.hide(); }, 250);
    }
}
</script>
 

Scenario 2: Custom server-side processing (RadProgressContext)

When the server is doing its own long-running work (e.g. document conversion), you report progress through RadProgressContext.Current. To get the dialog to close and to stop the polling automatically, set the built-in OperationComplete = true flag at the end of your operation. RadProgressManager will then end its internal polling timer on the next callback (no further requests to Telerik.RadUploadProgressHandler.ashx).

Important: the button that triggers the operation must be inside a RadAjaxManager AJAX setting (not a full postback), so the polling can run in parallel with the work.

protected void btnStart_Click(object sender, EventArgs e)
{
    var progress = RadProgressContext.Current;

    const int total = 20;
    progress.SecondaryTotal = total;

    for (int i = 1; i <= total; i++)
    {
        // ... process one document ...

        progress.SecondaryValue       = i;
        progress.SecondaryPercent     = (int)(i * 100.0 / total);
        progress.CurrentOperationText = string.Format("Processing document {0} of {1}", i, total);
    }

    // Optional custom flag for the client.
    progress["IsCompleted"] = "true";

    // Tells RadProgressManager to stop polling automatically.
    progress.OperationComplete = true;
}
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    OnClientResponseEnd="onResponseEnd">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnStart">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="lblStatus" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<telerik:RadProgressArea    ID="RadProgressArea1"    runat="server"
    OnClientProgressUpdating="onServerProgressUpdating" />

<telerik:RadButton ID="btnStart" runat="server" Text="Start"
    OnClick="btnStart_Click"
    OnClientClicked="onStartClick" />
<asp:Label ID="lblStatus" runat="server" Text="Idle." />

<script>

var _done = false;

function onStartClick(sender, args) {
    _done = false;
    var pa = $find("<%= RadProgressArea1.ClientID %>");
    if (pa) pa.show();
}

function onServerProgressUpdating(sender, args) {
    if (_done) { args.set_cancel(true); return; }

    var data = args.get_progressData();
    if (!data) return;

    var done = data["IsCompleted"] === "true" ||
               (data.SecondaryPercent || 0) >= 100 ||
               (data.PrimaryPercent   || 0) >= 100;

    if (done) {
        _done = true;
        args.set_cancel(true);
        setTimeout(function () { sender.hide(); }, 250);
    }
}

// Safety net — hide the dialog when the AJAX request completes,
// in case the last poll did not deliver the final update.
function onResponseEnd(sender, args) {
    _done = true;
    var pa = $find("<%= RadProgressArea1.ClientID %>");
    if (pa) pa.hide();
}
</script>

Notes that apply to both scenarios

• Only one RadProgressManager per page — it serves all RadProgressArea instances on the page.
• OnClientProgressUpdating exposes args.get_progressData(), args.set_cancel(true) and args.get_cancel() — full reference: https://www.telerik.com/products/aspnet-ajax/documentation/controls/progressarea/client-side-programming/onclientprogressupdating.
• Calling sender.hide() is the documented way to dismiss the dialog (RadProgressArea client object).
• The _done guard prevents duplicate hide() calls and log spam if a late polling response arrives after completion.

For your convenience, I have attached my test page for reference. You can use it as a base to proceed with your implementation.

Regards,
Rumen
Progress Telerik