React Form - SimpleItem

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

See Also

• Span Columns

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.

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

@(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

• Configure Simple Items

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

@(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

• Configure Simple Items

See Also

• Customize a Simple Item

$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            // ...
            validationRules: [
                { type: 'required' }
            ]
        },
        // ...
        ]
    });
});

<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

• Customize a Simple Item

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.

See Also

• Configure Labels - Location and Alignment

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

See Also

• Customize a Simple Item

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

• Validate and Submit the Form

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