SimpleItem

This article describes configuration options of a simple form item.

Type:

Object

A simple form item is an editor-label pair usually bound to a formData object field used to display and modify this field.

You can also create a simple item without binding it to a formData field. For example, it can be a check box that allows a user to confirm his agreement to process entered data.

For detailed information on configuring simple items, see the Configure Simple Items topic.

View Demo

colSpan

Specifies the number of columns spanned by the item.

Type:

Number

Default Value: undefined
See Also

cssClass

Specifies a CSS class to be applied to the form item.

Type:

String

Default Value: undefined

In Form, you can customize the appearance of form items using CSS styles. To apply a style to an item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the item.

dataField

Specifies the path to the formData object field bound to the current form item.

Type:

String

Default Value: undefined

editorOptions

Specifies configuration options for the editor widget of the current form item.

Type:

Object

Default Value: undefined

When using ASP.NET MVC Controls, configure the editor in the following manner.

Razor C#
Razor VB
@(Html.DevExtreme().Form()
    .FormData(Model.Data)
    .Items(items => {
        items.AddSimple().DataField("EmployeeID")
            // Instead of TextBox here can be any other supported editor
            .Editor(e => e.TextBox()
                .Placeholder("Type a text here...")
                // ...
                // other editor options go here
            )
    })
)
@(Html.DevExtreme().Form() _
    .FormData(Model.Data) _
    .Items(Sub(items)
        items.AddSimple().DataField("EmployeeID") _
            .Editor(Function(e)
                ' Instead of TextBox here can be any other supported editor
                Return e.TextBox() _
                    .Placeholder("Type a text here...") _
                    ' ...
                    ' other editor options go here
            End Function)
    End Sub)
)
See Also

editorType

Specifies which editor widget is used to display and edit the form item value.

Type:

String

Accepted Values: 'dxAutocomplete' | 'dxCalendar' | 'dxCheckBox' | 'dxColorBox' | 'dxDateBox' | 'dxDropDownBox' | 'dxLookup' | 'dxNumberBox' | 'dxRadioGroup' | 'dxSelectBox' | 'dxSlider' | 'dxSwitch' | 'dxTagBox' | 'dxTextArea' | 'dxTextBox'
NOTE
If you use DevExtreme modules, import the editor's module when specifying this option. You can omit modules for the "dxTextBox", "dxDateBox", "dxCheckBox" and "dxNumberBox" because the Form widget imports them automatically when creating form items.

When using ASP.NET MVC Controls, configure the editor in the following manner.

Razor C#
Razor VB
@(Html.DevExtreme().Form()
    .FormData(Model.Data)
    .Items(items => {
        items.AddSimple().DataField("EmployeeID")
            // Instead of CheckBox here can be any other supported editor
            .Editor(e => e.CheckBox()
                .Value(true)
                // ...
                // other editor options go here
            )
    })
)
@(Html.DevExtreme().Form() _
    .FormData(Model.Data) _
    .Items(Sub(items)
        items.AddSimple().DataField("EmployeeID") _
            .Editor(Function(e)
                ' Instead of CheckBox here can be any other supported editor
                Return e.CheckBox() _
                    .Value(True) _
                    ' ...
                    ' other editor options go here
            End Function)
    End Sub)
)
See Also

helpText

Specifies the help text displayed for the current form item.

Type:

String

Default Value: undefined

isRequired

Specifies whether the current form item is required.

Type:

Boolean

Default Value: undefined
NOTE

If you specify validation rules using the validationRules option, the isRequired option is ignored. In this case, use the Require validation rule instead.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            // ...
            validationRules: [
                { type: 'required' }
            ]
        },
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-form ... >
    <dxi-item ... >
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-item>
</dx-form>
import { DxFormModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
See Also

itemType

Specifies the type of the current item.

Type:

String

Default Value: 'simple'
Accepted Values: 'empty' | 'group' | 'simple' | 'tabbed'

The structure of the form item object depends on the value of this option.

This article describes the structure of an item whose type is "simple". The following item types are also available.

  • group
    Group item is a section consisting of a caption and child form items. You can customize the layout options for each group separately.

  • tabbed
    Tabbed item is a tabbed panel whose tabs contain child form items. You can customize the layout options for each tab separately.

  • empty
    Empty item is an empty span between neighboring items. You can specify the number of columns spanned by an empty item.

label

Specifies options for the form item label.

Type:

Object

Default Value: undefined

name

Specifies a name that identifies the form item.

Type:

String

Default Value: undefined

Use the name instead of the data field to access unbound simple items in methods like getEditor(dataField), itemOption(id), etc.

template

A template to be used for rendering the form item.

Type:

template

Function parameters:
data:

Object

The item's data.

Object structure:
component:

Form

The Form instance.

dataField:

String

The item's dataField.

editorOptions:

Object

The item editor's configuration.

editorType:

String

The editor's type.

itemElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

validationRules

An array of validation rules to be checked for the form item editor.

There are several predefined rule types. Each rule type demands a specific set of rule options. Refer to the Validation Rules section of the Validator API reference to learn how to define rules of different types.

View Demo

See Also

visible

Specifies whether or not the current form item is visible.

Type:

Boolean

Default Value: true

visibleIndex

Specifies the sequence number of the item in a form, group or tab.

Type:

Number

Default Value: undefined

Items whose visible indexes are not specified are located at the end of the sequence and are ordered alphabetically.