JavaScript/jQuery Form - GroupItem
This article describes configuration properties of a group form item.
A group form item is a section consisting of a caption and child form items. You can customize the layout properties for each group separately.
See Also
alignItemLabels
Specifies whether or not all group item labels are aligned.
colCount
The count of columns in the group layout.
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 { }Vue
<template>
<DxForm ...>
<DxGroupItem ...>
<DxColCountByScreen :xs="2" :sm="3"/>
<DxSimpleItem .../>
</DxGroupItem>
</DxForm>
</template>
<script>
import DxForm, { DxSimpleItem, DxGroupItem, DxColCountByScreen } from 'devextreme-vue/form';
export default {
components: {
DxForm,
DxSimpleItem,
DxGroupItem,
DxColCountByScreen
}
}
</script>React
import React from 'react';
import Form, { SimpleItem, GroupItem, ColCountByScreen } from 'devextreme-react/form';
const App = () => {
return (
<Form ...>
<GroupItem ...>
<ColCountByScreen xs={2} sm={3} />
<SimpleItem />
</GroupItem>
</Form>
);
};
export default App;cssClass
Specifies a CSS class to be applied to the form item.
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 property of the item.
items
Holds an array of form items displayed within the group.
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
itemType
Specifies the item's type. Set it to "group" to create a group item.
name
Specifies a name that identifies the form item.
Use the name to access the form item in methods like itemOption(id).
template
A template to be used for rendering a group item.
Use the template property 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 property of each of these items.
See Also
visibleIndex
Specifies the sequence number of the item in a form, group or tab.
Items whose visible indexes are not specified are located at the end of the sequence and are ordered alphabetically.