JavaScript/jQuery Form Options

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

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

See Also

• Align Editors Relatively to Each Other

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

<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
    ],
    // ...
})

When using the widget as an ASP.NET MVC Control, you can specify this option using the Mode enum that accepts the value Auto.

See Also

• Organize Simple Items In Columns

View Demo Watch Video

If you did not define form items using the items option, the Form 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.

See Also

• Customize a Simple Item

You can configure this option in an ASP.NET MVC Control as follows:

@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

See Also

• Configure Simple Items

This option 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%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

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. See demo.

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

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

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

When using the widget as an ASP.NET MVC Control, declare the items in the following manner.

@(Html.DevExtreme().Form()
    .FormData(Model.Data)
    .Items(rootItems => {
        rootItems.AddSimple().DataField("EmployeeID"); // Adds a simple item
        rootItems.AddEmpty(); // Adds an empty item
        rootItems.AddGroup().Caption("General Info") // Adds a group item
            .Items(groupItems => {
                groupItems.AddSimple().DataField("FirstName");
                // ...
            });
        rootItems.AddTabbed() // Adds a tabbed item
            .Tabs(tabs => {
                tabs.Add().Title("Address")
                    .Items(addressItems => {
                        addressItems.AddSimple().DataField("Country");
                        // ...
                    });
                tabs.Add().Title("Phone")
                    // ...
            });
    })
)

@(Html.DevExtreme().Form() _
    .FormData(Model.Data) _
    .Items(Sub(rootItems)
        rootItems.AddSimple().DataField("EmployeeID") ' Adds a simple item
        rootItems.AddEmpty() ' Adds an empty item
        ' Adds a group item
        rootItems.AddGroup().Caption("General Info") _
            .Items(Sub(groupItems)
                groupItems.AddSimple().DataField("FirstName")
                ' ...
            End Sub)
        ' Adds a tabbed item
        rootItems.AddTabbed() _
            .Tabs(Sub(tabs)
                tabs.Add().Title("Address") _
                    .Items(Sub(addressItems)
                        addressItems.AddSimple().DataField("Country")
                        ' ...
                    End Sub)
                tabs.Add().Title("Phone")
                    ' ...
            End Sub)
    End Sub)
)

When using the widget as an ASP.NET MVC Control, specify this option using the FormLabelLocation enum. This enum accepts the following values: Left, Right and Top.

See Also

• Location and Alignment

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

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

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

See Also

• Handle the Value Change Event

You cannot access widget elements in this handler because it is executed before they are ready. Use the onContentReady handler instead.

See Also

• Additional Marks

See Also

• Additional Marks

When this option is set to true, the widget 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.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

The function passed to this option should take on the screen width as a parameter and return a string containing the appropriate screen factor.

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

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

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
    ],
    // ...
})

View Demo

See Also

• Additional Marks

See Also

• Additional Marks

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

In some cases, the Form editors should be validated by the Button widget. 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 option of the Form widget. Also, pass the same name to the validationGroup option of the Button widget.

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

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

View Demo

This option 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;
  }

screenByWidth: function() { }