The WebProgressBar™ control’s progress label text can be accessed so that it can be displayed within any other control. For example, you may want to display the remaining progress within a Label control. The WebProgressBar control’s client side object model (CSOM) exposes this text through the FormattedLabel property.
You will display the WebProgressBar control’s progress label text within a standard label control. You will achieve this by handling the WebProgressBar ProgressChanged client-side event and using the FormattedLabel property.
In this topic, you will use the WebSlider™ control so that whenever the end-user moves the slider, the WebProgressBar progress is updated. The WebProgressBar formatted label text that shows the remaining percentage is then displayed within a Label control.
Place a ScriptManager component, a WebProgressBar control, a WebSlider control and a standard Label control on the form.
Set the Label control’s ID property to lblMsg.
The WebProgressBar and WebSlider can be left with their default minimum and maximum values.
Set the LabelFormatString and LabelAlignment properties as shown in the following code:
In Visual Basic:
'Sets the label format to display the remaining progress in percentage
WebProgressBar1.LabelFormatString = "Remaining progress : {3}%"
'Stops showing the label inside the WebProgressBar
WebProgressBar1.LabelAlignment = Infragistics.Web.UI.DisplayControls.ProgressBarLabelAlignment.None
In C#:
//Sets the label format to display the remaining progress in percentage
WebProgressBar1.LabelFormatString = "Remaining progress : {3}%";
//Stops showing the label inside the WebProgressBar
WebProgressBar1.LabelAlignment = Infragistics.Web.UI.DisplayControls.ProgressBarLabelAlignment.None;
Handle the WebSlider control’s link:Infragistics.webinfragistics.web.ui.editorcontrols.sliderclienteventsvaluechanged.html [ValueChanged] client-side event to display its current value in the WebProgressBar.
In JavaScript:
// The client event ‘ValueChanged’ takes two parameters sender and e
// sender is the object which is raising the event
// e is the SliderValueChangedEventArgs
function WebSlider1_ValueChanged(sender, e) {
//Gets reference to the WebSlider
var slider = $find("WebSlider1");
//Gets reference to the WebProgressBar
var progressbar = $find("WebProgressBar1");
//Gets the new value of the WebSlider
var slider_newValue = e.get_newValue();
//Sets the value property of WebProgressBar
progressbar.set_progressValue(slider_newValue);
}
Next, handle the WebProgressBar control’s ProgressChanged client-side event to display the WebProgressBar control’s formatted label text within the Label control.
In JavaScript:
// The client event ‘ProgressChanged’ takes two parameters sender and e
// sender is the object which is raising the event
// e is the ProgressChangedEventArgs
function WebProgressBar1_ProgressChanged(sender, e) {
//Gets the reference of WebProgressBar
var progressbar = $find("WebProgressBar1");
//Gets the formatted label of WebProgressBar
var progressbar_labelFormat = progressbar.get_formattedLabel();
//Shows the label of WebProgressBar in the label control
lblMsg.innerHTML = progressbar_labelFormat;
}
Save and run your application. Move the slider thumb and observe how the Label control displays the remaining progress.
Before moving the slider’s thumb:
After moving the slider’s thumb:
