GroupItem
A group form item is a section consisting of a caption and child form items. You can customize the layout options for each group separately.
See Also
colCount
For extra small screens, this option always equals 1 to make the widget adaptive. Specify the colCountByScreen option to override this logic.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "group",
items: [ ... ],
colCountByScreen: {
xs: 2
}
},
// ...
]
});
});Angular
<dx-form ... >
<dxi-item
itemType="group"
[items]="[ ... ]">
<dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})See Also
colCountByScreen
Specifies the relation between the screen size qualifier and the number of columns in the grouped layout.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "group",
items: [ ... ],
colCountByScreen: {
xs: 2,
sm: 3
}
},
// ...
]
});
});Angular
<dx-form ... >
<dxi-item itemType="group">
<dxo-col-count-by-screen
[xs]="2"
[sm]="3">
</dxo-col-count-by-screen>
<dxi-item ... ></dxi-item>
</dxi-item>
</dx-form>
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
],
bootstrap: [AppComponent]
})
export class AppModule { }component
An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
cssClass
In Form, you can customize the appearance of form items using CSS styles. To apply a style to an item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the item.
items
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
Like the items option of the Form widget, the array passed to the items field of a group item 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.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 items.
itemType
name
Use the name to access the form item in methods like itemOption(id).
render
An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
template
Use the template option of a group item to display custom content under a group caption, for instance an image. To specify a custom template for items contained in a group, define the template option of each of these items.
