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.
captionTemplate
Specifies a template that can be used to replace group captions with custom content.
This property overrides the caption option.
The following code example adds an icon to caption content:
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "group",
caption: "Personal Data",
captionTemplate: (data, $element) => {
$('<i class="dx-icon dx-icon-user"></i>').appendTo($element);
$(`<span>${data.caption}</span>`).appendTo($element);
},
items: ["firstName", "lastName", "position"]
}]
});
});Angular
<dx-form ... >
<dxi-item
itemType="group"
caption="Personal Data"
captionTemplate="caption-template"
>
<dxi-item dataField="firstName"></dxi-item>
<dxi-item dataField="lastName"></dxi-item>
<dxi-item dataField="position"></dxi-item>
</dxi-item>
<div *dxTemplate="let data of 'caption-template'">
<i class="dx-icon dx-icon-user"></i>
{{ data.caption }}
</div>
</dx-form>Vue
<template>
<DxForm ... >
<DxGroupItem
caption="Personal Data"
caption-template="caption-template"
>
<DxSimpleItem data-field="firstName" />
<DxSimpleItem data-field="lastName" />
<DxSimpleItem data-field="position" />
</DxGroupItem>
<template #caption-template="{ data }">
<i class="dx-icon dx-icon-user"></i>
{{ data.caption }}
</template>
</DxForm>
</template>
<script>
// ...
</script>React
// ...
const renderCaption = (data) => {
return (
<div>
<i class="dx-icon dx-icon-user"></i>
<span>{data.caption}</span>
</div>
);
}
export default function App() {
return (
<Form ... >
<GroupItem
caption="Personal Data"
captionRender={renderCaption}
>
<SimpleItem dataField="firstName" />
<SimpleItem dataField="lastName" />
<SimpleItem dataField="position" />
</GroupItem>
</Form>
);
}
export default App;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.