Edit this page

RadProgressArea Client Object

The following table lists the important methods of the RadProgressArea client object:

 

Name Parameters Return Type Description
cancelRequest none none Cancels the current request by refreshing the page. This method works only when the page is being submitted. See Example 1.
show none none Displays the RadProgressArea dialog. See Example 2.
hide none none Hides the RadProgressArea dialog. See Example 3.
update progressData none Updates the RadProgressArea with the specified information and causes the OnClientProgressUpdating event to fire. If the RadProgressArea is hidden, this method shows it by calling the show() method. See Example 4.
updateVerticalProgressBar HTML element, integer none Updates the height of the progress bar element passed as the first parameter to represent the percentage specified by the second parameter. This method is intended for implementing an OnClientProgressBarUpdating event handler. See Example 5.
updateHorizontalProgressBar HTML element, integer none Updates the width of the progress bar element passed as the first parameter to represent the percentage specified by the second parameter. This method is intended for implementing an OnClientProgressBarUpdating event handler. See Example 6.
updateTextIndicator HTML element, string none Updates the text value of the HTML element passed as the first parameter to the value passed as the second parameter. This method is intended for updating custom elements in a progress template from an OnClientProgressUpdating event handler. See Example 7.
get_element none HTML Element Returns the DOM element for the RadProgressArea control.

Example 1: Cancel the current request.


$find("<%= RadProgressArea1.ClientID %>").cancelRequest();

Example 2: Display the RadProgressArea dialog.

<telerik:radprogressarea runat="server" id="RadProgressArea1" />
<input type="button" value="Show" onclick="myShow()" />
<script type="text/javascript">
    function myShow() {
        $find("<%= RadProgressArea1.ClientID %>").show();
    }
</script>

Example 3: Hide the RadProgressArea dialog.

<telerik:radprogressarea runat="server" id="RadProgressArea1" />
<input type="button" value="Hide" onclick="hideDialog()" />
<script type="text/javascript">
    function hideDialog() { 
        $find("<%= RadProgressArea1.ClientID %>").hide(); 
    }
</script>

Example 4: Updates the RadProgressArea with the specified information.

function myUpdate() { 
    var progressData =   {     
        PrimaryPercent : 10,    
        PrimaryTotal : '50kB',   
        PrimaryValue : '5kB',  
        SecondaryPercent : 50,   
        SecondaryTotal : '20kB',  
        SecondaryValue : '10kB',   
        CurrentOperationText : 'c:\\test.jpg',  
        TimeElapsed : '5seconds',   
        TimeEstimated : '10seconds',   
        TransferSpeed : '100kB/second' 
    }
    find("<%= RadProgressArea1.ClientID %>").update(progressData);
}       

Example 5: Update the height of the progress bar element.

function clientProgressBarUpdating(radProgressArea, args) {  
    var bar = args.get_progressBarElement();  
    radProgressArea.updateVerticalProgressBar(bar, args.get_progressValue());  
    // skip the default progress bar updating  
    args.set_cancel(true);
}           

Example 6: Update the width of the progress bar element.

function clientProgressBarUpdating(radProgressArea, args) {  
    var bar = args.get_progressBarElement();  
    radProgressArea.updateHorizontalProgressBar(bar, args.get_progressValue());
    // skip the default progress bar updating  args.set_cancel(true);
}               

Example 7: Update the text value of the HTML element.

function clientProgressUpdating(progressArea, args) {
    var myControl = $get("myTemplatePrimaryValue");
    var data = args.get_progressData();
    progressArea.updateTextIndicator(myControl, progressData.PrimaryValue);
    args.set_cancel(true);
}