React Form Props

See Also

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

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

This property is used when the UI component is displayed on a platform whose guidelines include the active state change for UI components.

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 property when the UI component 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 property, the Form UI component creates them automatically according to the structure of an object passed to the formData property. The customizeItem property enables you to modify properties 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 property contains definition for form items, you usually do not need to pass a function to the customizeItem property because you can customize items before passing them to the items property. However, if you assign a function to this property, 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 UI component 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 property 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 UI component 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 property when the UI component 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 property makes sense only if the colCount property is set to "auto".

See Also

• Handle the Value Change Event

See Also

• Get a UI component Instance in Angular | AngularJS | Knockout | Vue | React

The following example shows how to subscribe to component property changes:

$(function() {
    $("#formContainer").dxForm({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-form ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-form>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxFormModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxFormModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxForm ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script> 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 
import DxForm from 'devextreme-vue/form'; 

export default { 
    components: { 
        DxForm
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react'; 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 

import Form from 'devextreme-react/form'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Form ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

See Also

• Additional Marks

See Also

• Additional Marks

When this property is set to true, the UI component 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 UI component 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 property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

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

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

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

View Demo

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