ASPxProgressBar Class
Represents a progress bar control.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.2.dll
Declaration
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.24.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.
<dx:ASPxProgressBar ID="progressBar" runat="server" ShowPosition="true"
Position="42" Width="100px" ClientInstanceName="ClientProgressBar">
</dx:ASPxProgressBar>
Run Time
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;
}
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:
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.
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() != "");
}