JavaScript/jQuery Form Options

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components. See the following GitHub repository for an example of this type of platform: MUI.

alignItemLabels

Specifies whether or not all root item labels are aligned.

Type:

Default Value: true

alignItemLabelsInAllGroups

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

Type:

Default Value: true

NOTE

This property applies only to those simple items that are nested within a group item. Thus, we recommend that you do not leave any simple items ungrouped if you need a consistent alignment throughout the Form.

colCount

The count of columns in the form layout.

Type:

Number

|

Default Value: 1

Accepted Values: 'auto'

NOTE

For extra small screens, this property always equals 1 to make the UI component adaptive. To override this logic, specify the colCountByScreen property.

colCountByScreen

Specifies dependency between the screen factor and the count of columns in the form layout.

Type:

Default Value: undefined

The following code sample illustrates how to set this property:

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        colCountByScreen: {
            xs: 2
        }
    });
});

Angular

HTML

TypeScript

<dx-form ... >
    <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm ...>
        <DxColCountByScreen :xs="2"/>
    </DxForm>
</template>
<script>
import DxForm, { DxColCountByScreen } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxColCountByScreen
    }
}
</script>

React

App.js

import React from 'react';
import Form, { ColCountByScreen } from 'devextreme-react/form';

const App = () => {
    return (
        <Form ...>
            <ColCountByScreen xs={2} />
        </Form>
    );
};

export default App;

customizeItem

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

Type:

Function parameters:

item:

|

|

|

|

The item's object.

If you did not define form items using the items property, the Form UI component creates them automatically according to the structure of an object passed to the formData property. The customizeItem property enables you to modify properties 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 property contains definition for form items, you usually do not need to pass a function to the customizeItem property because you can customize items before passing them to the items property. However, if you assign a function to this property, it will be called for each item. In this case, an item can have structure corresponding to one of the item types.

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Type: any

Default Value: {}

jQuery

$(function(){
    $("#formContainer").dxForm({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-form ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm ...
        :element-attr="formAttributes">
    </DxForm>
</template>

<script>
import DxForm from 'devextreme-vue/form';

export default {
    components: {
        DxForm
    },
    data() {
        return {
            formAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Form from 'devextreme-react/form';

class App extends React.Component {
    formAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Form ...
                elementAttr={this.formAttributes}>
            </Form>
        );
    }
}
export default App;

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Type:

Default Value: false

formData

Provides the Form's data. Gets updated every time form fields change.

Type: any

Default Value: {}

Raised Events: onFieldDataChanged

height

Specifies the UI component's height.

Type:

|

|

Return Value:

|

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".
Function
A function returning either of the above. For example:
JavaScript
```
height: function() {
    return window.innerHeight / 1.5;
}
```

hint

Specifies text for a hint that appears when a user pauses on the UI component.

Type:

Default Value: undefined

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

Type:

Overview Demo Customize Fields at Runtime Demo

Default Value: false

items

Holds an array of form items.

Type:

Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>

Default Value: undefined

labelLocation

Specifies the location of a label against the editor.

Type:

Default Value: 'left', 'top' (Material)

Accepted Values: 'left' | 'right' | 'top'

minColWidth

The minimum column width used for calculating column count in the form layout. Applies only if colCount property is "auto".

Type:

Number

Default Value: 200

NOTE

The actual column width equals the UI component width divided by the column count.

onContentReady

A function that is executed when the UI component's content is ready and each time the content is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Form

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

any

Model data. Available only when using Knockout.

Default Value: null

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Form

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

any

Model data. Available only if you use Knockout.

Default Value: null

onEditorEnterKey

A function that is executed when the Enter key has been pressed while an editor is focused.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Form	The UI component's instance.
dataField	String	The path to the formData object field associated with the current editor.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.

Default Value: null

IMPORTANT

This function is executed only if the editor raises the enterKey event. See the Events section in the editor's API reference for the list of events the editor can raise. If the enterKey event is absent from the list, but you need to handle the Enter key press, use another editor.

onFieldDataChanged

A function that is executed when the value of a formData object field is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Form	The UI component's instance.
dataField	String	The path to the formData object field whose value has been changed.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.
value	Object	The field's new value.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name

Type

Description

component

Form

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
model	any	Model data. Available only if you use Knockout.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Form	The UI component's instance.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value	any	The modified property's new value.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#formContainer").dxForm({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-form ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-form>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxFormModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxFormModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxForm ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxForm from 'devextreme-vue/form'; 

export default { 
    components: { 
        DxForm
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Form from 'devextreme-react/form'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Form ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

optionalMark

The text displayed for optional fields.

Type:

Default Value: 'optional'

readOnly

Specifies whether all editors on the form are read-only. Applies only to non-templated items.

Type:

Default Value: false

requiredMark

The text displayed for required fields.

Type:

Default Value: '*'

requiredMessage

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

Type:

Default Value: '{0} is required'

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

screenByWidth

Specifies a function that categorizes screens by their width.

Type:

Default Value: null

The UI component uses the following size qualifiers to categorize screens by width:

Size Qualifier	Description
xs	Stands for "extra small". Screens with width less than 768 pixels.
sm	Stands for "small". Screens with width between 768 and 992 pixels.
md	Stands for "medium". Screens with width between 992 and 1200 pixels.
lg	Stands for "large". Screens with width more than 1200 pixels.

Implement the screenByWidth function to change the relation between a size qualifier and screen width. This function accepts the screen width and should return a size qualifier. The following code shows the function's default implementation that you can customize:

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        screenByWidth: function(width) {
            if (width < 768) return "xs";
            if (width < 992) return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    });
});

Angular

TypeScript

HTML

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    getSizeQualifier(width) {
        if (width < 768)  return "xs";
        if (width < 992)  return "sm";
        if (width < 1200) return "md";
        return "lg";
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

<dx-form ...
    [screenByWidth]="getSizeQualifier">
</dx-form>

Vue

App.vue

<template>
    <DxForm ...
        :screen-by-width="getSizeQualifier">
        <!-- ... -->
    </DxForm>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxForm, {
    // ...
} from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        // ...
    },
    // ...
    methods: {
        getSizeQualifier(width) {
            if (width < 768)  return "xs";
            if (width < 992)  return "sm";
            if (width < 1200) return "md";
            return "lg";
        }
    }
}
</script>

React

App.js

import 'devextreme/dist/css/dx.light.css';

import Form, {
    // ...
} from 'devextreme-react/form';

const getSizeQualifier = (width) => {
    if (width < 768)  return "xs";
    if (width < 992)  return "sm";
    if (width < 1200) return "md";
    return "lg";
};

export default function App() {
    return (
        <Form ...
            screenByWidth={getSizeQualifier}>
            {/* ... */}
        </Form>
    );
}

scrollingEnabled

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

Type:

Default Value: false

showColonAfterLabel

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

Type:

Default Value: true, false (Material)

showOptionalMark

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

Type:

Default Value: false

showRequiredMark

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

Type:

Default Value: true

showValidationSummary

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

Type:

Default Value: false

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

validationGroup

Gives a name to the internal validation group.

Type:

Default Value: undefined

In some cases, the Form editors should be validated by the Button UI component. By default, these editors are collected in an unnamed validation group, what makes it impossible for the Button to validate them. In this case, give this validation group a name using the validationGroup property of the Form UI component. Also, pass the same name to the validationGroup property of the Button UI component.

$(function () {
    $("#formContainer").dxForm({
        // ...
        validationGroup: "groupName"
    });

    $("#buttonContainer").dxButton({
        // ...
        validationGroup: "groupName",
        onClick: function (e) {
            e.validationGroup.validate();
        }
    });
})

visible

Specifies whether the UI component is visible.

Type:

Default Value: true

width

Specifies the UI component's width.

Type:

|

|

Return Value:

|

The UI component's width.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".
Function
A function returning either of the above. For example:
JavaScript
```
width: function() {
    return window.innerWidth / 1.5;
}
```