React Form - GroupItem

This article describes configuration properties of a group form item.

Type:

Object

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.

View Demo

See Also

alignItemLabels

Specifies whether or not all group item labels are aligned.

Type:

Boolean

Default Value: true

caption

Specifies the group caption.

Type:

String

Default Value: undefined

View Demo

captionComponent

An alias for the captionTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

captionRender

An alias for the captionTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

captionTemplate

Specifies a template that can be used to replace group captions with custom content.

Type:

template

Template Data:
Name Type Description
caption

String

The group caption.
component

Form

The Form instance.
name

String

The group item's name.

This property overrides the caption option.

The following code example adds an icon to caption content:

jQuery
index.js
$(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
app.component.html
<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
App.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
App.js
// ...
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.

Type:

Number

Default Value: 1

NOTE
For extra small screens, this property always equals 1 to make the UI component adaptive. Specify the colCountByScreen property to override this logic.
See Also

colCountByScreen

Specifies the relation between the screen size qualifier and the number of columns in the grouped layout.

Selector: ColCountByScreen
Type:

Object

Default Value: undefined

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "group",
            items: [ ... ],
            colCountByScreen: {
                xs: 2, 
                sm: 3  
            }
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.module.ts
<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
App.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
App.js
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;

colSpan

Specifies the number of columns spanned by the item.

Type:

Number

Default Value: undefined

View Demo

See Also

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

cssClass

Specifies a CSS class to be applied to the form item.

Type:

String

Default Value: undefined

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.

View Demo

items

Holds an array of form items displayed within the group.

Selector: Item
Type:

Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>

Default Value: undefined

Like the items property of the Form UI component, the array passed to the items field of a group item can hold items of any type.

View Demo

itemType

Specifies the item's type. Set it to "group" to create a group item.

Type:

FormItemType

Default Value: 'simple'

View Demo

See Also

name

Specifies a name that identifies the form item.

Type:

String

Default Value: undefined

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

A template to be used for rendering a group item.

Type:

template

Template Data:
Name Type Description
component

Form

The Form instance.
formData

Object

The formData object.

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.

Form With Image

NOTE
To define a custom template used to render group items, assign the required template name or template container to each simple item's template property.
See Also

visible

Specifies whether or not the current form item is visible.

Type:

Boolean

Default Value: true

visibleIndex

Specifies the sequence number of the item in a form, group or tab.

Type:

Number

Default Value: undefined

Items whose visible indexes are not specified are located at the end of the sequence and are ordered alphabetically.