Free Trial Buy

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

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.

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.

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:

String

Default Value: 'simple'
Accepted Values: 'empty' | 'group' | 'simple' | 'tabbed' | 'button'

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.