JavaScript/jQuery Form Options

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

Use the Mode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Auto.

See Also

• Organize Simple Items In Columns

View Demo

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

View Demo

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

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

  JavaScript

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

Simple Items Demo Grouped and Tabbed Items Demo Button Item Demo

When using the widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, declare the items as follows:

@(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")
                    // ...
            });
        rootItems.AddButton() // Adds a button item
            .ButtonOptions(b => b.Text("Register")
                .Type(ButtonType.Success)
                .UseSubmitBehavior(true)
            );
    })
)

@(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)
        ' Adds a button item
        rootItems.AddButton() _
            .ButtonOptions(Sub(b)
                b.Text("Register") _
                 .Type(ButtonType.Success) _
                 .UseSubmitBehavior(True)
            End Sub)
    End Sub)
)

Use the FormLabelLocation enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. 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".

See Also

• Handle the Value Change Event

See Also

• Get a Widget Instance in Angular | AngularJS | Knockout | Vue | React

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 widget uses the following size qualifiers to categorize screens by width:

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:

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

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>

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() { }