Simple Item

This article describes configuration options of a simple form item.

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 creating simple items, see the Create Simple Items topic.

colSpan

Specifies the number of columns spanned by the item.

Type: Number
Default Value: undefined

cssClass

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

Type: String
Default Value: undefined

In dxForm, 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

editorType

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

Type: String
Accepted Values: 'dxTextBox' | 'dxNumberBox' | 'dxDateBox' | 'dxCheckBox' | 'dxSwitch' | 'dxSelectBox' | 'dxLookup' | 'dxTagBox' | 'dxTextArea' | 'dxColorBox' | 'dxCalendar' | 'dxAutocomplete' | 'dxRadioGroup' | 'dxSlider'

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

itemType

Specifies the type of the current item.

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

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 the form item name.

Type: String
Default Value: undefined

Use this option if you need to create a form item without binding it to a formData field. You can use the item name to identify this form item when calling any of the following methods.

template

A template to be used for rendering the form item.

Function parameters:
data: Object

An object providing access to the field data, form instance and the configuration object of the editor.

itemElement: Object

An HTML element of the item to be rendered.

Return Value: String|DOM Node|jQuery

A template name or a template container.

A binding context of an item template is an object containing the following fields. So, you can bind template elements to these fields directly. To access another binding context within an item template, use Knockout/AngularJS binding variables.

  • component
    An instance of the current dxForm widget.

  • dataField
    A formData object field bound to the form item being rendered.

  • editorOptions
    The configuration object of the current form item editor.

See Also

validationRules

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

Type: Array
Default Value: undefined

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

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.