accessKey
The value of this option will be passed to the accesskey
attribute of the HTML element that underlies the widget.
alignItemLabelsInAllGroups
colCount
For extra small screens, this option always equals 1 to make the widget adaptive. To override this logic, specify the colCountByScreen option.
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 ], // ... })
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
customizeItem
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
elementAttr
Specifies the attributes to be attached to the widget's root element.
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" } }) )
height
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:JavaScriptheight: function() { return window.innerHeight / 1.5; }
items
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item>
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) )
labelLocation
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
minColWidth
This option makes sense only if the colCount option is set to 'auto'.
onContentReady
A handler for the contentReady event. Executed when the widget's content is ready. This handler may be executed multiple times during the widget's lifetime depending on the number of times its content changes.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only when using Knockout. |
onDisposing
A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
onEditorEnterKey
A handler for the editorEnterKey event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The form's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
dataField |
The path to the formData object field associated with the current editor. |
onFieldDataChanged
A handler for the fieldDataChanged event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
dataField |
The path to the formData object field whose value has been changed. |
|
value |
The field's new value. |
Assign a function to perform a custom action after the value of a formData object field has been changed.
See Also
onInitialized
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
You cannot access widget elements in this handler because it is executed before they are ready. Use the onContentReady handler instead.
onOptionChanged
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The option's full name. |
|
value | any |
The option's new value. |
readOnly
Specifies whether all editors on the form are read-only. Applies only to non-templated items.
rtlEnabled
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
screenByWidth
The function passed to this option should take on the screen width as a parameter and return a string containing the appropriate screen factor.
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
<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 ], // ... })
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 option will be passed to the tabindex
attribute of the HTML element that underlies the widget.
validationGroup
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(); } }); })
width
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:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
Even if the width of the widget 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 option.
screenByWidth: function() { }
If you have technical questions, please create a support ticket in the DevExpress Support Center.