Tab
A newer version of this page is available. Switch to the current version.

ASPxProgressBar Class

Represents a progress bar control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v18.2.dll

Declaration

public class ASPxProgressBar :
    ASPxEditBase
Public Class ASPxProgressBar
    Inherits ASPxEditBase

Remarks

The ASPxProgressBar class implements the functionality of a progress bar control, which enables you to visually indicate the progress of a lengthy operation or operation rate, etc. A progress bar control can be typically used when an application performs tasks such as uploading files or deleting data records.

ASPxProgressBar-Class

Note that the ASPxProgressBar control (progress bar) can only be oriented horizontally. The control visualizes the progress information using a continuous bar (progress bar indicator) that fills in from left to right. In addition, a percentage value indicating the current indicator position is displayed within the progress bar, if the ASPxProgressBar.ShowPosition property is set to true.

The appearance of a progress bar control can be customized using the standard control properties. The progress bar indicator's appearance is defined via the ASPxProgressBar.IndicatorStyle property.

The ASPxProgressBar.Minimum and ASPxProgressBar.Maximum properties define the range of values to represent the progress of an operation. The ASPxProgressBar.Minimum property is typically set to 0, and the ASPxProgressBar.Maximum property is typically set to a value indicating the completion of a task. For instance, to properly display the progress when uploading a group of files, the ASPxProgressBar.Maximum property could be set to the total number of files to be uploaded or to their total length.

The ASPxProgressBar.Position property represents the progress that the application has made toward completing the operation. The ASPxProgressBar.Position property's value lies in the range defined by the ASPxProgressBar.Minimum and ASPxProgressBar.Maximum properties. The value displayed by the progress bar control only approximates the current value of the ASPxProgressBar.Position property.

NOTE

The ASPxProgressBar control provides you with a comprehensive client-side functionality, implemented using JavaScript code (see DevExpress.Web.Scripts to learn more):

The control's client-side API is enabled if the ASPxEditBase.EnableClientSideAPI property is set to true, or the ASPxEditBase.ClientInstanceName property is defined, or any client event is handled.

Online Demo:

Custom Progress Panel

Examples

In this example, the ASPxProgressBar control is used to visualize the progress of a file upload initiated within the ASPxUploadControl. The ASPxClientUploadControl.UploadingProgressChanged client event of the ASPxUploadControl is handled, to supply the ASPxProgressBar control with current progress information. Using the ASPxProgressBar as a separate control, allows placing it at any desired position within the page. The complete sample project is available in the DevExpress Code Central database at E1252.

function OnBtnUploadClick(s, e){
            if(uploadControl.GetText() != ""){
                lblCompleteMessage.SetVisible(false);
                pbUpload.SetPosition(0);
                uploadControl.Upload();
                btnUpload.SetEnabled(false);
                pnlProgress.SetVisible(true);
            }
        }

        function OnUploadProgressChanged(s, e){
            pbUpload.SetPosition(e.progress);
        }

        function OnFileUploadComplete(s, e){
            if(e.isValid){
                btnCancel.SetVisible(false);
                btnUpload.SetEnabled(true);
                pbUpload.SetPosition(100);
                lblCompleteMessage.SetVisible(true);
            }
            else{
                btnUpload.SetEnabled(true);
                pnlProgress.SetVisible(false);
            }
        }

        function OnBtnCancelClick(s, e){
            uploadControl.Cancel();
            btnUpload.SetEnabled(true);
            pnlProgress.SetVisible(false);
        }

        function OnUploadControlTextChanged(s, e){
            btnUpload.SetEnabled(s.GetText() != "");
        }
See Also