ASPxProgressBar Class
Represents a progress bar control.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.2.dll
NuGet Package: DevExpress.Web
#Declaration
public class ASPxProgressBar :
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.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.
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 ASPx
- The control’s client-side equivalent is represented by the ASPx
Client object.Progress Bar - On the client side, the client object can be accessed directly by the name specified via the ASPx
Edit property.Base. Client Instance Name - The available client events can be accessed by using the ASPx
Progress property.Bar. Client Side Events
The control’s client-side API is enabled if the ASPxtrue
, or the ASPx
#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() != "");
}