Vue Form Props
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
accessKey
The value of this property will be passed to the accesskey
attribute of the HTML element that underlies the UI component.
alignItemLabelsInAllGroups
colCount
For extra small screens, this property always equals 1 to make the UI component adaptive. To override this logic, specify the colCountByScreen property.
jQuery
$(function() { $("#formContainer").dxForm({ // ... colCountByScreen: { xs: 2 } }); });
Angular
<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
customizeItem
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
elementAttr
Specifies the global attributes to be attached to the UI component's container element.
jQuery
$(function(){ $("#formContainer").dxForm({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-form ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-form>
import { DxFormModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFormModule ], // ... })
Vue
<template> <DxForm ... :element-attr="formAttributes"> </DxForm> </template> <script> import DxForm from 'devextreme-vue/form'; export default { components: { DxForm }, data() { return { formAttributes: { id: 'elementId', class: 'class-name' } } } } </script>
React
import React from 'react'; import Form from 'devextreme-react/form'; class App extends React.Component { formAttributes = { id: 'elementId', class: 'class-name' } render() { return ( <Form ... elementAttr={this.formAttributes}> </Form> ); } } export default App;
height
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:JavaScriptheight: function() { return window.innerHeight / 1.5; }
items
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
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) )
labelLocation
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
minColWidth
This property makes sense only if the colCount property is set to "auto".
onContentReady
A function that is executed when the UI component's content is ready and each time the content is changed.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only when using Knockout. |
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if you use Knockout. |
onEditorEnterKey
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
dataField |
The path to the formData object field associated with the current editor. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if Knockout is used. |
onFieldDataChanged
A function that is executed when the value of a formData object field is changed.
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
dataField |
The path to the formData object field whose value has been changed. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
Model data. Available only if Knockout is used. |
|
value |
The field's new value. |
onInitialized
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
onOptionChanged
Name | Type | Description |
---|---|---|
model |
Model data. Available only if you use Knockout. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
|
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
value | any |
The modified property's new value. |
The following example shows how to subscribe to component property changes:
jQuery
$(function() { $("#formContainer").dxForm({ // ... onOptionChanged: function(e) { if(e.name === "changedProperty") { // handle the property change here } } }); });
Angular
<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 { }
Vue
<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>
React
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} /> ); }
readOnly
Specifies whether all editors on the form are read-only. Applies only to non-templated items.
rtlEnabled
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
screenByWidth
The UI component uses the following size qualifiers to categorize screens by width:
Size Qualifier | Description |
---|---|
xs | Stands for "extra small". Screens with width less than 768 pixels. |
sm | Stands for "small". Screens with width between 768 and 992 pixels. |
md | Stands for "medium". Screens with width between 992 and 1200 pixels. |
lg | Stands for "large". Screens with width more than 1200 pixels. |
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:
jQuery
$(function() { $("#formContainer").dxForm({ // ... screenByWidth: function(width) { if (width < 768) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; } }); });
Angular
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>
showOptionalMark
Specifies whether or not the optional mark is displayed for optional fields.
showRequiredMark
Specifies whether or not the required mark is displayed for required fields.
tabIndex
The value of this property will be passed to the tabindex
attribute of the HTML element that underlies the UI component.
validationGroup
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(); } }); })
width
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:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
Even if the width of the UI component is specified, the count of columns may depend on the screen width. For example, if the screen width is not enough to display the whole form's container, the count of columns depends on the screen width, not the container. To always use a fixed count of columns regardless of the screen width, pass an empty function to the screenByWidth property.
screenByWidth: function() { }
If you have technical questions, please create a support ticket in the DevExpress Support Center.