Form Configuration

An object defining configuration options for the dxForm widget.

accessKey

Specifies a shortcut key that sets focus on the widget element.

Type: String
Default Value: null

The accessKey option value is passed to the accesskey attribute of the actual HTML element of the widget.

activeStateEnabled

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

Type: Boolean
Default Value: false

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

alignItemLabels

Specifies whether or not all root item labels are aligned.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="alignLabels" dx-check-box="{
            text: 'Align item labels'
        }"></div>
    </div>
    <div dx-form="{
         formData: employee,
         labelLocation: 'left',
         colCount: 2,
         bindingOptions: {
            alignItemLabels: 'alignLabels'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.alignLabels = true;
    $scope.employee = employeeInfo;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height:300px;
    max-width:750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox: {
            text: 'Align item labels',
            value: alignLabels
        }"></div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        labelLocation: 'left',
        colCount: 2,
        alignItemLabels: alignLabels
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    alignLabels: ko.observable(true)
};

ko.applyBindings(viewModel);
.wrapper{
    height:300px;
    max-width:750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="alignLabelsCheckBox"></div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#alignLabelsCheckBox").dxCheckBox({
        text: 'Align item labels',
        value: true,
        onValueChanged: function(e) {
            $("#form").dxForm("instance").option('alignItemLabels', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        colCount: 2,
        labelLocation: 'left'
    });
});
.wrapper{
    height:300px;
    max-width:750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

alignItemLabelsInAllGroups

Specifies whether or not item labels in all groups are aligned.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="alignLabelsInAllGroups" dx-check-box="{
            text: 'Align labels in all groups'
        }"></div>
    </div>
    <div dx-form="formOptions"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.alignLabelsInAllGroups = true;
    $scope.formOptions = {
        formData: employeeInfo,
        labelLocation: 'left',
        colCount: 2,
        items: [
            {
                itemType: 'group',
                caption: 'Personal Data',
                colSpan: 2,
                colCount: 2,
                items: [
                    'FirstName',
                    'LastName',
                    'BirthDate',
                    'City'
                ]
            },
            {
                itemType: 'group',
                caption: 'Company Info',
                items: [
                    'Position',
                    'HireDate'
                ]
            },
            {
                itemType: 'group',
                caption: 'Contacts',
                items: [
                    'Phone',
                    'Email'
                ]
            }
        ],
        bindingOptions: {
            alignItemLabelsInAllGroups: 'alignLabelsInAllGroups'
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

.wrapper{
    height: 400px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox: alignLabelsInAllGroupsOptions"></div>
    </div>
    <div data-bind="dxForm: formOptions"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var alignLabelsInAllGroups = ko.observable(true);

var viewModel = {
    formOptions: {
        formData: employeeInfo,
        labelLocation: 'left',
        colCount: 2,
        alignItemLabelsInAllGroups: alignLabelsInAllGroups,
        items: [
            {
                itemType: 'group',
                caption: 'Personal Data',
                colSpan: 2,
                colCount: 2,
                items: [
                    'FirstName',
                    'LastName',
                    'BirthDate',
                    'City'
                ]
            },
            {
                itemType: 'group',
                caption: 'Company Info',
                items: [
                    'Position',
                    'HireDate'
                ]
            },
            {
                itemType: 'group',
                caption: 'Contacts',
                items: [
                    'Phone',
                    'Email'
                ]
            }
        ]
    },
    alignLabelsInAllGroupsOptions: {
        text: 'Align labels in all groups',
        value: alignLabelsInAllGroups
    }
};

ko.applyBindings(viewModel);
.wrapper{
    height: 400px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="alignLabelsInAllGroupsCheckBox"></div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#alignLabelsInAllGroupsCheckBox").dxCheckBox({
        text: 'Align labels in all groups',
        value: true,
        onValueChanged: function(e){
            $("#form").dxForm("instance").option('alignItemLabelsInAllGroups', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        labelLocation: 'left',
        colCount: 2,
        items: [
            {
                itemType: 'group',
                caption: 'Personal Data',
                colSpan: 2,
                colCount: 2,
                items: [
                    'FirstName',
                    'LastName',
                    'BirthDate',
                    'City'
                ]
            },
            {
                itemType: 'group',
                caption: 'Company Info',
                items: [
                    'Position',
                    'HireDate'
                ]
            },
            {
                itemType: 'group',
                caption: 'Contacts',
                items: [
                    'Phone',
                    'Email'
                ]
            }
        ],
    });
});
.wrapper{
    height: 400px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

colCount

The count of columns in the form layout.

Type: Number|String
Default Value: 1
Accepted Values: 'auto'

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>Columns count:</div>
        <div ng-model="columnCount" dx-number-box="{
            min: 1,
            max: 4,
            width: 150,
            showSpinButtons: true
        }"></div>
    </div>
    <div dx-form="{
        formData: employee,
        labelLocation: 'top',
        bindingOptions:{
            colCount: 'columnCount'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.columnCount = 1;
    $scope.employee = employeeInfo;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 570px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div>Columns count:</div>
        <div data-bind="dxNumberBox: {
            min: 1,
            max: 4,
            width: 150,
            showSpinButtons: true,
            value: columnCount
        }"></div>
    </div>
    <div data-bind="dxForm:{
        formData: employee,
        labelLocation: 'top',
        colCount: columnCount
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    columnCount: ko.observable(1)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 570px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div>Columns count:</div>
        <div id="columnsCountNumberBox"></div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#columnsCountNumberBox").dxNumberBox({
        value: 1,
        min: 1,
        max: 4,
        showSpinButtons: true,
        width: 150,
        onValueChanged: function(e) {
            $("#form").dxForm("instance").option('colCount', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        labelLocation: 'top'
    });
});
.wrapper{
    height: 570px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

customizeItem

Specifies a function that customizes a form item after it has been created.

Type: function
Function parameters:
item: Form item
Provides access to the item instance.

If you did not define form items using the items option, the dxForm widget creates them automatically according to the structure of an object passed to the formData option. The customizeItem option enables you to modify options of each generated item before this item is rendered. Each generated item passed to this function as an argument has a Simple Item structure.

If the items option contains definition for form items, you usually do not need to pass a function to the customizeItem option because you can customize items before passing them to the items option. However, if you assign a function to this option, it will be called for each item. In this case, an item can have structure corresponding to any of the following item types.

  • Simple
    A standard item consisting of a label and an editor widget used to specify a value of the associated data field.

  • Group
    An item representing a container of other form items.

  • Tabbed
    An item representing a tabbed container of other form items.

  • Empty
    An empty item used to add a space between neighboring form items.

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 class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="disabled" dx-check-box="{
            text: 'disabled'
        }"></div>
    </div>
    <div dx-form="{
        formData: employee,
        labelLocation: 'left',
        colCount: 2,
        bindingOptions: {
            disabled: 'disabled'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.disabled = false;
    $scope.employee = employeeInfo;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox: {
            text: 'disabled',
            value: disabled
        }"></div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        labelLocation: 'left',
        colCount: 2,
        disabled: disabled
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    disabled: ko.observable(false)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="disabledCheckBox"></div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#disabledCheckBox").dxCheckBox({
        text: 'disabled',
        value: false,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('disabled', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        colCount: 2,
        labelLocation: 'left'
    });
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false

formData

An object providing data for the form.

Type: Object
Default Value: {}

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

items

Holds an array of form items.

Type: Array
Default Value: undefined

The array passed to this option can hold items of the following types.

  • Simple
    A standard item consisting of a label and an editor widget used to specify a value of the associated data field.

  • Group
    An item representing a container of another form items.

  • Tabbed
    An item representing a tabbed container of another form items.

  • Empty
    An empty item used to add a space between neighboring items.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div dx-form="formOptions"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);

myApp.controller("demoController", function ($scope) {
    $scope.formOptions = {
        formData: employeeInfo,
        labelLocation: 'left',
        items: [
            {
                itemType: 'group',
                caption: 'Personal Data',
                colCount: 2,
                items: [
                    'FirstName',
                    { itemType: 'empty' },
                    'LastName',
                    'BirthDate'
                ]
            },
            {
                itemType: 'group',
                caption: 'Other information',
                items: [
                    {
                        itemType: 'tabbed',
                        tabs: [
                            {
                                title: 'Company info',
                                items: [
                                    'Position',
                                    'HireDate',
                                    'City'
                                ]
                            },
                            {
                                title: 'Contacts',
                                items: [
                                    'Phone',
                                    'Email'
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 450px;
    max-width: 750px;
    margin: 0 auto;
}
<div class="wrapper">
    <div data-bind="dxForm: formOptions"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    formOptions: {
        formData: employeeInfo,
        labelLocation: 'left',
        items: [
            {
                itemType: 'group',
                caption: 'Personal Data',
                colCount: 2,
                items: [
                    'FirstName',
                    { itemType: 'empty' },
                    'LastName',
                    'BirthDate'
                ]
            },
            {
                itemType: 'group',
                caption: 'Other information',
                items: [
                    {
                        itemType: 'tabbed',
                        tabs: [
                            {
                                title: 'Company info',
                                items: [
                                    'Position',
                                    'HireDate',
                                    'City'
                                ]
                            },
                            {
                                title: 'Contacts',
                                items: [
                                    'Phone',
                                    'Email'
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
};

ko.applyBindings(viewModel);
.wrapper{
    height: 450px;
    max-width: 750px;
    margin: 0 auto;
}
<div class="wrapper">
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#form").dxForm({
        formData: employeeInfo,
        labelLocation: 'left',
        items: [
            {
                itemType: 'group',
                caption: 'Personal Data',
                colCount: 2,
                items: [
                    'FirstName',
                    { itemType: 'empty' },
                    'LastName',
                    'BirthDate'
                ]
            },
            {
                itemType: 'group',
                caption: 'Other information',
                items: [
                    {
                        itemType: 'tabbed',
                        tabs: [
                            {
                                title: 'Company info',
                                items: [
                                    'Position',
                                    'HireDate',
                                    'City'
                                ]
                            },
                            {
                                title: 'Contacts',
                                items: [
                                    'Phone',
                                    'Email'
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    });
});
.wrapper{
    height: 450px;
    max-width: 750px;
    margin: 0 auto;
}

labelLocation

Specifies the location of a label against the editor.

Type: String
Default Value: 'left'
Accepted Values: 'left' | 'right' | 'top'

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>Label location:</div>
        <div ng-model="labelLocation" dx-select-box="{
            dataSource: [ 'left', 'top','right'],
            width: 200
        }"></div>
    </div>
    <div dx-form="{
        formData: employee,
        colCount: 2,
        showColonAfterLabel: false,
        bindingOptions:{
            labelLocation: 'labelLocation'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.labelLocation = 'left';
    $scope.employee = employeeInfo;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div>Label location:</div>
        <div data-bind="dxSelectBox:{
            dataSource: [ 'left', 'top','right'],
            width: 200,
            value: labelLocation
        }"></div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        colCount: 2,
        showColonAfterLabel: false,
        labelLocation: labelLocation,
        }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    labelLocation: ko.observable('left')
};

ko.applyBindings(viewModel);
.wrapper{
    height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div>Label location:</div>
        <div id="labelLocationSelectBox"></div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#labelLocationSelectBox").dxSelectBox({
        dataSource: ['left', 'top', 'right'],
        value: 'left',
        width: 200,
        onValueChanged: function(e) {
            $("#form").dxForm("instance").option('labelLocation', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        colCount: 2,
        showColonAfterLabel: false,
        labelLocation: 'left'
    });
});
.wrapper{
    height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

minColWidth

The minimum column width used for calculating column count in the form layout.

Type: Number
Default Value: 200

This option makes sense only if the colCount option is set to 'auto'.

NOTE: The actual column width equals the widget width divided by the column count.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="minColumnWidth" dx-slider="{
            min: 170,
            max: 400,
            step: 10,
            width: 200
        }">
        </div>
        <p> minColWidth: <span>{{minColumnWidth}}</span></p>
    </div>
    <div dx-form="{
        formData: employee,
        labelLocation: 'left',
        colCount: 'auto',
        bindingOptions: {
            minColWidth: 'minColumnWidth'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.minColumnWidth = 170;
    $scope.employee = employeeInfo;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 470px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxSlider:{
            min: 170,
            max: 400,
            step: 10,
            width: 200,
            value: minColumnWidth
        }"></div>
        <p> minColWidth: <span data-bind="text: minColumnWidth"></span></p>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        labelLocation: 'left',
        colCount: 'auto',
        minColWidth: minColumnWidth
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    minColumnWidth: ko.observable(170)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 470px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="minColumnWidthSlider"></div>
        <p>minColWidth <span id="minColValue"></span><p>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#minColumnWidthSlider").dxSlider({
        min: 170,
        max: 400,
        step: 10,
        value: 170,
        width: 200,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('minColWidth', e.value);
            $("#minColValue").text(e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        colCount: 'auto',
        labelLocation: 'left',
        minColWidth: 170
    });
});
.wrapper{
    height: 470px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

onContentReady

A handler for the contentReady 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. Available only in the Knockout and AngularJS approaches.
Default Value: null

Assign a function to perform a custom action when widget content is ready.

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. Available only in the Knockout and AngularJS approaches.
Default Value: null

Assign a function to perform a custom action when the widget is being removed.

NOTE: The function assigned to this option is executed only if the widget is removed using the remove(), empty(), or html() jQuery methods.

onEditorEnterKey

A handler for the editorEnterKey event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the form instance.
element: jQuery
An HTML element of the form.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
dataField: String
The path to the formData object field associated with the current editor.
Default Value: null

Assign a function to perform a custom action after a user presses the Enter key when an editor is focused.

onFieldDataChanged

A handler for the fieldDataChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the form instance.
element: jQuery
An HTML element of the form.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
dataField: String
The path to the formData object field whose value has been changed.
value: Object
The new value of the field.
Default Value: null

Assign a function to perform a custom action after the value of a formData object field has been changed.

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div dx-form="{
        formData: employee,
        labelLocation: 'left',
        colCount: 2,
        bindingOptions: {
            onFieldDataChanged: 'notify'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.employee = employeeInfo;
    $scope.notify = function () {
        DevExpress.ui.notify("A field value has been changed", "info", 2000);
    }
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
<div class="wrapper">
    <div data-bind="dxForm: {
        formData: employee,
        labelLocation: 'left',
        colCount: 2,
        onFieldDataChanged: notify
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    notify: function () {
        DevExpress.ui.notify("A field value has been changed", "info", 2000);
    }
};

ko.applyBindings(viewModel);
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
<div class="wrapper">
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#form").dxForm({
        formData: employeeInfo,
        labelLocation: 'left',
        colCount: 2,
        onFieldDataChanged: function () {
            DevExpress.ui.notify("A field value has been changed", "info", 2000);
        }
    });
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}

onInitialized

A handler for the initialized 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.
Default Value: null

Assign a function to perform a custom action when the widget is initialized.

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.
name: String
Specifies the name of the option whose value is changed.
fullName: String
Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.
value: any
Specifies a new value for the option.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.
Default Value: null

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

optionalMark

The text displayed for optional fields.

Type: String
Default Value: 'optional'

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <div ng-model="showOptionalMark" dx-check-box="{
                text: 'Show optional mark'
            }"></div>
            <div ng-model="optionalMark" dx-text-box="{
                placeholder: 'Enter optional mark',
                width: 200
            }"></div>
        </div>
        <div>
            <p ng-model="showRequiredMark" dx-check-box="{
                text: 'Show required mark'
            }"></p>
            <p ng-model="requiredMark" dx-text-box="{
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div dx-form="{
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
            bindingOptions: {
                optionalMark: 'optionalMark',
                requiredMark: 'requiredMark',
                showOptionalMark: 'showOptionalMark',
                showRequiredMark: 'showRequiredMark'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.employee = employeeInfo;
    $scope.itemsOptions = [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ];
    $scope.optionalMark = '(optional)';
    $scope.showOptionalMark = false;
    $scope.requiredMark = '*';
    $scope.showRequiredMark = true;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
    display: inline-block;
    vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show optional mark',
                value: showOptionalMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: optionalMark,
                placeholder: 'Enter optional mark',
                width: 200
            }"></p>
        </div>
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show required mark',
                value: showRequiredMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: requiredMark,
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
        optionalMark: optionalMark,
        requiredMark: requiredMark,
        showOptionalMark: showOptionalMark,
        showRequiredMark: showRequiredMark
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    itemsOptions: [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ],
    optionalMark: ko.observable('(optional)'),
    showOptionalMark: ko.observable(false),
    requiredMark: ko.observable('*'),
    showRequiredMark: ko.observable(true)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
    display: inline-block;
    vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="optionalMarkCheckBox"></p>
            <p id="optionalMarkTextBox"></p>
        </div>
        <div>
            <p id="requiredMarkCheckBox"></p>
            <p id="requiredMarkTextBox"></p>
        </div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#optionalMarkCheckBox").dxCheckBox({
        text: 'Show optional mark',
        value: false,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showOptionalMark', e.value);
        }
    });
    $("#optionalMarkTextBox").dxTextBox({
        placeholder: 'Enter optional mark',
        width: 200,
        value: '(optional)',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('optionalMark', e.value);
        }
    });
    $("#requiredMarkCheckBox").dxCheckBox({
        text: 'Show required mark',
        value: true,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showRequiredMark', e.value);
        }
    });
    $("#requiredMarkTextBox").dxTextBox({
        placeholder: 'Enter required mark',
        width: 200,
        value: '*',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('requiredMark', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        items: [
            {
                dataField: 'FirstName',
                isRequired: true
            },
            {
                dataField: 'LastName',
                isRequired: true
            },
            'Skype',
            'Email'
        ],
        optionalMark: '(optional)',
        labelLocation: 'left',
        colCount: 2
    });
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
    display: inline-block;
    vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
    display: inline-block;
    vertical-align: middle;
}

readOnly

Specifies whether or not all editors on the form are read-only.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="readOnlyValue" dx-check-box="{
            text: 'ReadOnly'
        }"></div>
    </div>
    <div dx-form="{
        formData: employee,
        colCount: 2,
        labelLocation: 'top',
        bindingOptions:{
            readOnly: 'readOnlyValue'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.readOnlyValue = false;
    $scope.employee = employeeInfo;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox:{
            text: 'ReadOnly',
            value: readOnlyValue
        }"></div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        colCount: 2,
        labelLocation: 'top',
        readOnly: readOnlyValue
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    readOnlyValue: ko.observable(false)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="readOnlyCheckBox"></div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#readOnlyCheckBox").dxCheckBox({
        text: 'ReadOnly',
        value: false,
        onValueChanged: function(e) {
            $("#form").dxForm("instance").option('readOnly', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        colCount: 2,
        labelLocation: 'left',
    });
});
.wrapper{
    height: 350px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

requiredMark

The text displayed for required fields.

Type: String
Default Value: '*'

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <div ng-model="showOptionalMark" dx-check-box="{
                text: 'Show optional mark'
            }"></div>
            <div ng-model="optionalMark" dx-text-box="{
                placeholder: 'Enter optional mark',
                width: 200
            }"></div>
        </div>
        <div>
            <p ng-model="showRequiredMark" dx-check-box="{
                text: 'Show required mark'
            }"></p>
            <p ng-model="requiredMark" dx-text-box="{
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div dx-form="{
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
            bindingOptions: {
                optionalMark: 'optionalMark',
                requiredMark: 'requiredMark',
                showOptionalMark: 'showOptionalMark',
                showRequiredMark: 'showRequiredMark'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.employee = employeeInfo;
    $scope.itemsOptions = [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ];
    $scope.optionalMark = '(optional)';
    $scope.showOptionalMark = false;
    $scope.requiredMark = '*';
    $scope.showRequiredMark = true;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show optional mark',
                value: showOptionalMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: optionalMark,
                placeholder: 'Enter optional mark',
                width: 200
            }"></p>
        </div>
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show required mark',
                value: showRequiredMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: requiredMark,
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
        optionalMark: optionalMark,
        requiredMark: requiredMark,
        showOptionalMark: showOptionalMark,
        showRequiredMark: showRequiredMark
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    itemsOptions: [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ],
    optionalMark: ko.observable('(optional)'),
    showOptionalMark: ko.observable(false),
    requiredMark: ko.observable('*'),
    showRequiredMark: ko.observable(true)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="optionalMarkCheckBox"></p>
            <p id="optionalMarkTextBox"></p>
        </div>
        <div>
            <p id="requiredMarkCheckBox"></p>
            <p id="requiredMarkTextBox"></p>
        </div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#optionalMarkCheckBox").dxCheckBox({
        text: 'Show optional mark',
        value: false,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showOptionalMark', e.value);
        }
    });
    $("#optionalMarkTextBox").dxTextBox({
        placeholder: 'Enter optional mark',
        width: 200,
        value: '(optional)',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('optionalMark', e.value);
        }
    });
    $("#requiredMarkCheckBox").dxCheckBox({
        text: 'Show required mark',
        value: true,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showRequiredMark', e.value);
        }
    });
    $("#requiredMarkTextBox").dxTextBox({
        placeholder: 'Enter required mark',
        width: 200,
        value: '*',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('requiredMark', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        items: [
            {
                dataField: 'FirstName',
                isRequired: true
            },
            {
                dataField: 'LastName',
                isRequired: true
            },
            'Skype',
            'Email'
        ],
        optionalMark: '(optional)',
        labelLocation: 'left',
        colCount: 2
    });
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}

requiredMessage

Specifies the message that is shown for end-users if a required field value is not specified.

Type: String
Default Value: '{0} is required'

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.

scrollingEnabled

A Boolean value specifying whether to enable or disable form scrolling.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div ng-model="scrollingEnabled" dx-check-box="{
            text: 'scrollingEnabled'
        }"></div>
    </div>
    <div dx-form="{
        formData: employee,
        labelLocation: 'left',
        colCount: 1,
        height: 200,
        bindingOptions: {
            scrollingEnabled: 'scrollingEnabled'
        }
    }"></div>
</div>
    var employeeInfo = {
        FirstName: "John",
        LastName: "Heart",
        Position: "CEO",
        BirthDate: "1964/03/16",
        HireDate: "1995/01/15",
        City: "Los Angeles",
        Phone: "+1(213) 555-9392",
        Email: "jheart@dx-email.com"
    };

    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.scrollingEnabled = false;
        $scope.employee = employeeInfo;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });

.wrapper{
    height: 400px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div data-bind="dxCheckBox: {
            text: 'scrollingEnabled',
            value: scrollingEnabled
    }"></div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        labelLocation: 'left',
        height: 200,
        colCount: 1,
        scrollingEnabled: scrollingEnabled
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Position: "CEO",
    BirthDate: "1964/03/16",
    HireDate: "1995/01/15",
    City: "Los Angeles",
    Phone: "+1(213) 555-9392",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    scrollingEnabled: ko.observable(false)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 400px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}
<div class="wrapper">
    <div class="option">
        <div id="scrollingEnabledCheckBox"></div>
    </div>
    <div id="form"></div>
</div>
    var employeeInfo = {
        FirstName: "John",
        LastName: "Heart",
        Position: "CEO",
        BirthDate: "1964/03/16",
        HireDate: "1995/01/15",
        City: "Los Angeles",
        Phone: "+1(213) 555-9392",
        Email: "jheart@dx-email.com"
    };

    $(function () {
        $("#scrollingEnabledCheckBox").dxCheckBox({
            text: 'scrollingEnabled',
            value: false,
            onValueChanged: function (e) {
                $("#form").dxForm("instance").option('scrollingEnabled', e.value);
            }
        });
        $("#form").dxForm({
            formData: employeeInfo,
            height: 200,
            colCount: 1,
            labelLocation: 'left'
        });
    });
.wrapper{
    height: 400px;
    max-width: 750px;
    margin: 0 auto;
}

.option{
    margin: 20px 0 20px 0;
    border-bottom: 2px solid #ddd;
    padding: 10px;
}

showColonAfterLabel

Specifies whether or not a colon is displayed at the end of form labels.

Type: Boolean
Default Value: true

showOptionalMark

Specifies whether or not the optional mark is displayed for optional fields.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <div ng-model="showOptionalMark" dx-check-box="{
                text: 'Show optional mark'
            }"></div>
            <div ng-model="optionalMark" dx-text-box="{
                placeholder: 'Enter optional mark',
                width: 200
            }"></div>
        </div>
        <div>
            <p ng-model="showRequiredMark" dx-check-box="{
                text: 'Show required mark'
            }"></p>
            <p ng-model="requiredMark" dx-text-box="{
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div dx-form="{
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
            bindingOptions: {
                optionalMark: 'optionalMark',
                requiredMark: 'requiredMark',
                showOptionalMark: 'showOptionalMark',
                showRequiredMark: 'showRequiredMark'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.employee = employeeInfo;
    $scope.itemsOptions = [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ];
    $scope.optionalMark = '(optional)';
    $scope.showOptionalMark = false;
    $scope.requiredMark = '*';
    $scope.showRequiredMark = true;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show optional mark',
                value: showOptionalMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: optionalMark,
                placeholder: 'Enter optional mark',
                width: 200
            }"></p>
        </div>
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show required mark',
                value: showRequiredMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: requiredMark,
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
        optionalMark: optionalMark,
        requiredMark: requiredMark,
        showOptionalMark: showOptionalMark,
        showRequiredMark: showRequiredMark
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    itemsOptions: [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ],
    optionalMark: ko.observable('(optional)'),
    showOptionalMark: ko.observable(false),
    requiredMark: ko.observable('*'),
    showRequiredMark: ko.observable(true)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="optionalMarkCheckBox"></p>
            <p id="optionalMarkTextBox"></p>
        </div>
        <div>
            <p id="requiredMarkCheckBox"></p>
            <p id="requiredMarkTextBox"></p>
        </div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#optionalMarkCheckBox").dxCheckBox({
        text: 'Show optional mark',
        value: false,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showOptionalMark', e.value);
        }
    });
    $("#optionalMarkTextBox").dxTextBox({
        placeholder: 'Enter optional mark',
        width: 200,
        value: '(optional)',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('optionalMark', e.value);
        }
    });
    $("#requiredMarkCheckBox").dxCheckBox({
        text: 'Show required mark',
        value: true,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showRequiredMark', e.value);
        }
    });
    $("#requiredMarkTextBox").dxTextBox({
        placeholder: 'Enter required mark',
        width: 200,
        value: '*',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('requiredMark', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        items: [
            {
                dataField: 'FirstName',
                isRequired: true
            },
            {
                dataField: 'LastName',
                isRequired: true
            },
            'Skype',
            'Email'
        ],
        optionalMark: '(optional)',
        labelLocation: 'left',
        colCount: 2
    });
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}

showRequiredMark

Specifies whether or not the required mark is displayed for required fields.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery
<div class="wrapper" ng-controller="demoController">
    <div class="option">
        <div>
            <div ng-model="showOptionalMark" dx-check-box="{
                text: 'Show optional mark'
            }"></div>
            <div ng-model="optionalMark" dx-text-box="{
                placeholder: 'Enter optional mark',
                width: 200
            }"></div>
        </div>
        <div>
            <p ng-model="showRequiredMark" dx-check-box="{
                text: 'Show required mark'
            }"></p>
            <p ng-model="requiredMark" dx-text-box="{
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div dx-form="{
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
            bindingOptions: {
                optionalMark: 'optionalMark',
                requiredMark: 'requiredMark',
                showOptionalMark: 'showOptionalMark',
                showRequiredMark: 'showRequiredMark'
        }
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.employee = employeeInfo;
    $scope.itemsOptions = [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ];
    $scope.optionalMark = '(optional)';
    $scope.showOptionalMark = false;
    $scope.requiredMark = '*';
    $scope.showRequiredMark = true;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show optional mark',
                value: showOptionalMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: optionalMark,
                placeholder: 'Enter optional mark',
                width: 200
            }"></p>
        </div>
        <div>
            <p data-bind="dxCheckBox:{
                text: 'Show required mark',
                value: showRequiredMark
            }"></p>
            <p data-bind="dxTextBox: {
                value: requiredMark,
                placeholder: 'Enter required mark',
                width: 200
            }"></p>
        </div>
    </div>
    <div data-bind="dxForm: {
        formData: employee,
        items: itemsOptions,
        labelLocation: 'left',
        colCount: 2,
        optionalMark: optionalMark,
        requiredMark: requiredMark,
        showOptionalMark: showOptionalMark,
        showRequiredMark: showRequiredMark
    }"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

var viewModel = {
    employee: employeeInfo,
    itemsOptions: [
        {
            dataField: 'FirstName',
            isRequired: true
        },
        {
            dataField: 'LastName',
            isRequired: true
        },
        'Skype',
        'Email'
    ],
    optionalMark: ko.observable('(optional)'),
    showOptionalMark: ko.observable(false),
    requiredMark: ko.observable('*'),
    showRequiredMark: ko.observable(true)
};

ko.applyBindings(viewModel);
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}
<div class="wrapper">
    <div class="option">
        <div>
            <p id="optionalMarkCheckBox"></p>
            <p id="optionalMarkTextBox"></p>
        </div>
        <div>
            <p id="requiredMarkCheckBox"></p>
            <p id="requiredMarkTextBox"></p>
        </div>
    </div>
    <div id="form"></div>
</div>
var employeeInfo = {
    FirstName: "John",
    LastName: "Heart",
    Skype: "JohnnyHeart",
    Email: "jheart@dx-email.com"
};

$(function () {
    $("#optionalMarkCheckBox").dxCheckBox({
        text: 'Show optional mark',
        value: false,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showOptionalMark', e.value);
        }
    });
    $("#optionalMarkTextBox").dxTextBox({
        placeholder: 'Enter optional mark',
        width: 200,
        value: '(optional)',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('optionalMark', e.value);
        }
    });
    $("#requiredMarkCheckBox").dxCheckBox({
        text: 'Show required mark',
        value: true,
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('showRequiredMark', e.value);
        }
    });
    $("#requiredMarkTextBox").dxTextBox({
        placeholder: 'Enter required mark',
        width: 200,
        value: '*',
        onValueChanged: function (e) {
            $("#form").dxForm("instance").option('requiredMark', e.value);
        }
    });
    $("#form").dxForm({
        formData: employeeInfo,
        items: [
            {
                dataField: 'FirstName',
                isRequired: true
            },
            {
                dataField: 'LastName',
                isRequired: true
            },
            'Skype',
            'Email'
        ],
        optionalMark: '(optional)',
        labelLocation: 'left',
        colCount: 2
    });
});
.wrapper{
    height: 300px;
    max-width: 750px;
    margin: 0 auto;
}
.option{
	margin: 20px 0 20px 0;
	border-bottom: 2px solid #ddd;
	padding: 10px;
}
.option>*{
    margin-bottom: 10px;
}
.option .dx-checkbox{
	display: inline-block;
	vertical-align: middle;
    width: 170px;
}
.option .dx-textbox{
	display: inline-block;
	vertical-align: middle;
}

showValidationSummary

Specifies whether or not the total validation summary is displayed on the form.

Type: Boolean
Default Value: false

tabIndex

Specifies the widget tab index.

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