ProgressBar Configuration

An object defining configuration options for the dxProgressBar widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Start', onClick: start }"></div>
    <div id="myProgressBar" dx-progress-bar="{ 
        min: 0,
        max: 100,
        value: 0,
        bindingOptions: {
            disabled: 'progressBarDisabled'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">disabled</div>
            <div class="dx-field-value" dx-switch="{
                bindingOptions:{
                    value: 'progressBarDisabled'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
var performStep = function () {
    var progressBar = $("#myProgressBar").dxProgressBar("instance");
    if (progressBar.option("value") == 100)
        return;
    progressBar.option("value", progressBar.option("value") + 1);
    setTimeout(performStep, 50);
}
myApp.controller("demoController", function ($scope) {
    $scope.progressBarDisabled = false;
    $scope.start = function () {
        $("#myProgressBar").dxProgressBar("instance").option("value", 0);
        performStep();
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}
<div data-bind="dxButton:{ text: 'Start', onClick: start }"></div>
<div data-bind="dxProgressBar:{
    min: 0,
    max: 100,
    value: currentValue,
    disabled: progressBarDisabled
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">disabled</div>
        <div class="dx-field-value" data-bind="dxSwitch: {
            value: progressBarDisabled
        }"></div>
    </div>
</div>
var performStep = function(){
    if (myViewModel.currentValue() == 100)
        return;
    myViewModel.currentValue(myViewModel.currentValue() + 1);
    setTimeout(performStep, 50);
}
var myViewModel = {
    progressBarDisabled: ko.observable(false),
    currentValue: ko.observable(0),
    start: function () {
        this.currentValue(0);
        performStep();
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}
<div id="startButton"></div>
<div id="myProgressBar"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">disabled</div>
        <div class="dx-field-value" id="disabledSelector"></div>
    </div>
</div>
var performStep = function () {
    var progressBar = $("#myProgressBar").dxProgressBar("instance");
    if (progressBar.option("value") == 100)
        return;
    progressBar.option("value", progressBar.option("value") + 1);
    setTimeout(performStep, 50);
}
$("#myProgressBar").dxProgressBar({
    min: 0,
    max: 100,
    value: 0
});
$("#startButton").dxButton({
    text: 'Start',
    onClick: function () {
        $("#myProgressBar").dxProgressBar("instance").option("value", 0);
        performStep();
    }
});
$("#disabledSelector").dxSwitch({
    value: false,
    onValueChanged: function (e) {
        $("#myProgressBar").dxProgressBar("instance").option("disabled", e.value);
    }
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

hoverStateEnabled

A Boolean value specifying whether or not the widget changes its state when being hovered by an end user.

Type: Boolean
Default Value: false

max

The maximum value the widget can accept.

Type: Number
Default Value: 100

min

The minimum value the widget can accept.

Type: Number
Default Value: 0

onComplete

A handler for the complete event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when the value option value reaches the max option value.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Start', onClick: start }"></div>
    <div id="myProgressBar" dx-progress-bar="{ 
        min: 0,
        max: 10,
        value: 0,
        onComplete: complete
    }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
var performStep = function () {
    var progressBar = $("#myProgressBar").dxProgressBar("instance");
    if (progressBar.option("value") == 10)
        return;
    progressBar.option("value", progressBar.option("value") + 1);
    setTimeout(performStep, 200);
}
myApp.controller("demoController", function ($scope) {
    $scope.progressBarDisabled = false;
    $scope.start = function () {
        $("#myProgressBar").dxProgressBar("instance").option("value", 0);
        performStep();
    };
    $scope.complete = function () {
        DevExpress.ui.dialog.alert("Complete");
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}
<div data-bind="dxButton:{ text: 'Start', onClick: start }"></div>
<div data-bind="dxProgressBar:{
    min: 0,
    max: 10,
    value: currentValue,
    onComplete: complete
}"></div>
var performStep = function () {
    if (myViewModel.currentValue() == 10)
        return;
    myViewModel.currentValue(myViewModel.currentValue() + 1);
    setTimeout(performStep, 200);
}
var myViewModel = {
    progressBarDisabled: ko.observable(false),
    currentValue: ko.observable(0),
    start: function () {
        this.currentValue(0);
        performStep();
    },
    complete: function () {
        DevExpress.ui.dialog.alert("Complete");
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}
<div id="startButton"></div>
<div id="myProgressBar"></div>
var performStep = function () {
    var progressBar = $("#myProgressBar").dxProgressBar("instance");
    if (progressBar.option("value") == 10)
        return;
    progressBar.option("value", progressBar.option("value") + 1);
    setTimeout(performStep, 200);
}
$("#myProgressBar").dxProgressBar({
    min: 0,
    max: 10,
    value: 0,
    onComplete: function () {
        DevExpress.ui.dialog.alert("Complete");
    }
});
$("#startButton").dxButton({
    text: 'Start',
    onClick: function () {
        $("#myProgressBar").dxProgressBar("instance").option("value", 0);
        performStep();
    }
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when you dispose of this component.

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: any
Specifies a new value for the option.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

onValueChanged

A handler for the valueChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: Object
The widget's new value.
previousValue: Object
The widget's previous value.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: null

Assign a function to perform a custom action when the editor value changes.

readOnly

A Boolean value specifying whether or not the widget is read-only.

Type: Boolean
Default Value: false

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

showStatus

Specifies whether or not the widget displays a progress status.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Start', onClick: start }"></div>
    <div id="myProgressBar" dx-progress-bar="{ 
        min: 0,
        max: 100,
        value: 0,
        bindingOptions: {
            showStatus: 'statusVisible'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">showStatus</div>
            <div class="dx-field-value" dx-switch="{
                bindingOptions:{
                    value: 'statusVisible'
                }
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
var performStep = function () {
    var progressBar = $("#myProgressBar").dxProgressBar("instance");
    if (progressBar.option("value") == 100)
        return;
    progressBar.option("value", progressBar.option("value") + 1);
    setTimeout(performStep, 50);
}
myApp.controller("demoController", function ($scope) {
    $scope.statusVisible = true;
    $scope.start = function () {
        $("#myProgressBar").dxProgressBar("instance").option("value", 0);
        performStep();
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}
<div data-bind="dxButton:{ text: 'Start', onClick: start }"></div>
<div data-bind="dxProgressBar:{
    min: 0,
    max: 100,
    value: currentValue,
    showStatus: statusVisible
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">showStatus</div>
        <div class="dx-field-value" data-bind="dxSwitch: {
            value: statusVisible
        }"></div>
    </div>
</div>
var performStep = function () {
    if (myViewModel.currentValue() == 100)
        return;
    myViewModel.currentValue(myViewModel.currentValue() + 1);
    setTimeout(performStep, 50);
}
var myViewModel = {
    statusVisible: ko.observable(true),
    currentValue: ko.observable(0),
    start: function () {
        this.currentValue(0);
        performStep();
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}
<div id="startButton"></div>
<div id="myProgressBar"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">showStatus</div>
        <div class="dx-field-value" id="showStatusSelector"></div>
    </div>
</div>
var performStep = function () {
    var progressBar = $("#myProgressBar").dxProgressBar("instance");
    if (progressBar.option("value") == 100)
        return;
    progressBar.option("value", progressBar.option("value") + 1);
    setTimeout(performStep, 50);
}
$("#myProgressBar").dxProgressBar({
    min: 0,
    max: 100,
    value: 0,
    showStatus: true
});
$("#startButton").dxButton({
    text: 'Start',
    onClick: function () {
        $("#myProgressBar").dxProgressBar("instance").option("value", 0);
        performStep();
    }
});
$("#showStatusSelector").dxSwitch({
    value: true,
    onValueChanged: function (e) {
        $("#myProgressBar").dxProgressBar("instance").option("showStatus", e.value);
    }
});
body {
    text-align: center;
}
.dx-button{
    margin-top: 25px;
}
.dx-progressbar{
    margin: 10px;
}

statusFormat

Specifies a format for the progress status.

Type: String|function
Function parameters:
ratio: Number
Specifies the ratio of the current progress to the entire range. (From 0 to 1)
value: Number
The current widget value, which can also be accessed using the [value](/Documentation/ApiReference/UI_Widgets/dxProgressBar/Configuration/#value) option.
Return Value: String
A status string for the current progress value.
Default Value: function(ratio, value) { return "Progress: " + Math.round(ratio * 100) + "%" }

A function passed to this option should take on a numeric value and return a formatted value. For instance, you can add a "%" sign after a value. In this case, the function passed to the statusFormat option should look like the following.

JavaScript
function(ratio, value) {
    return ratio * 100 + "% (" + value + ")";
}

You can also pass a string satisfying Globalize format patterns to the statusFormat option.

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

value

The current widget value.

Type: Number
Default Value: 0

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }