ASPxProgressBar Class

Represents a progress bar control.

Assembly : DevExpress.Web.v25.2.dll

Declaration

C#
VB.NET

csharp

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.

Create a Progress Bar

Design Time

The ASPxProgressBar control is available on the DX.25.2: Common Controls toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.

ASPX

aspx

<dx:ASPxProgressBar ID="progressBar" runat="server" ShowPosition="true"
                    Position="42" Width="100px" ClientInstanceName="ClientProgressBar">
</dx:ASPxProgressBar>

csharp

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
    ASPxProgressBar progressBar = new ASPxProgressBar();
    progressBar.ID = "progressBar";
    Page.Form.Controls.Add(progressBar);

    progressBar.ClientInstanceName = "ClientProgressBar";
    progressBar.Width = 100;
    progressBar.ShowPosition = true;
    progressBar.Position = 42;
}

Imports DevExpress.Web

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim progressBar As ASPxProgressBar = New ASPxProgressBar()
    progressBar.ID = "progressBar"
    Page.Form.Controls.Add(progressBar)

    progressBar.ClientInstanceName = "ClientProgressBar"
    progressBar.Width = 100
    progressBar.ShowPosition = True
    progressBar.Position = 42
End Sub

Note

DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.

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:

The control’s client-side equivalent is represented by the ASPxClientProgressBar object.
On the client side, the client object can be accessed directly by the name specified via the ASPxEditBase.ClientInstanceName property.
The available client events can be accessed by using the ASPxProgressBar.ClientSideEvents property.

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

Example

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.

JS
ASPX

javascript

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() != "");
        }

aspx

...
    <dxe:ASPxLabel ID="lblFileSizeMessage" runat="server" 
                 Text="The size of a file to upload shouldn't be greater than 5000 Kb." 
    CssClass="smallMessage" />
...
    <dxuc:ASPxUploadControl ID="uc" ClientInstanceName="uploadControl" runat="server">
        <ClientSideEvents UploadingProgressChanged="OnUploadProgressChanged" 
                                 FileUploadComplete="OnFileUploadComplete"
        TextChanged="OnUploadControlTextChanged" />
    </dxuc:ASPxUploadControl>
...
    <dxe:ASPxButton ID="btnUpload" ClientInstanceName="btnUpload" runat="server" Text="Upload"
    AutoPostBack="False">
        <ClientSideEvents Click="OnBtnUploadClick" />
    </dxe:ASPxButton>
...
    <dxe:ASPxProgressBar ID="pbUpload" ClientInstanceName="pbUpload" runat="server" Width="200px"
    Height="23px" />
...
    <dxe:ASPxButton ID="btnCancel" ClientInstanceName="btnCancel" runat="server" Text="Cancel"
    AutoPostBack="False">
        <ClientSideEvents Click="OnBtnCancelClick" />
    </dxe:ASPxButton>
...
    <dxe:ASPxLabel ID="lblCompleteMessage" ClientInstanceName="lblCompleteMessage" 
                ClientVisible="False" runat="server" Text="Upload completed" />
...