Switch Configuration

An object defining configuration options for the dxSwitch 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.

Show Example:
jQuery
<div data-bind="dxSwitch: { activeStateEnabled: enableActiveState }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Active state</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableActiveState }"></div>
  </div>
</div>
enableActiveState = ko.observable(true);
body{
  text-align: center;
}

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:
jQuery
<div class="switch" data-bind="dxSwitch: { value: true, disabled: switchDisabled }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: switchDisabled }"></div>
  </div>
</div>
switchDisabled = ko.observable(false);
body{
  text-align: center;
}
.switch{
  margin: 10px;
}

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.

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

    JavaScript
    height: function () { 
        return baseHeight - 10 + "%";
    }

hoverStateEnabled

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

Type: Boolean
Default Value: true

offText

Text displayed when the widget is in a disabled state.

Type: String
Default Value: "OFF"

Show Example:
jQuery
<div class="switch" data-bind="dxSwitch: { onText: onTextValue, offText: offTextValue }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">On text</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: onTextValue }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">Off text</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: offTextValue }"></div>
  </div>
</div>
onTextValue = ko.observable("ON");
offTextValue = ko.observable("OFF");
body{
  text-align: center;
}
.switch{
  margin: 10px;
}

onText

Text displayed when the widget is in an enabled state.

Type: String
Default Value: "ON"

Show Example:
jQuery
<div class="switch" data-bind="dxSwitch: { onText: onTextValue, offText: offTextValue }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">On text</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: onTextValue }"></div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">Off text</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: offTextValue }"></div>
  </div>
</div>
onTextValue = ko.observable("ON");
offTextValue = ko.observable("OFF");
body{
  text-align: center;
}
.switch{
  margin: 10px;
}

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.

value

A Boolean value specifying whether the current switch state is "On" or "Off".

Type: Boolean
Default Value: false

Show Example:
jQuery
<div class="switch" data-bind="dxSwitch: { value: switchValue }"></div><br/>
<div class="button" data-bind="dxButton: { text: 'Change switch value', clickAction: changeSwitchValue }"></div>
switchValue = ko.observable(false);
changeSwitchValue = function(){
  switchValue(!switchValue());
};
body{
  text-align: center;
}
.switch{
  margin: 10px;
}
.button{
  margin-top:25px;
}

valueChangeAction

An action performed when the editor value changes.

Type: String|function(e)
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
Returns the widget's new value.
previousValue: Object
Returns the widget's previous value.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
Default Value: undefined

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

Alternatively, you can assign a URL to which the browser will navigate when the editor value changes.

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 + "%";
    }