Vue Form - GroupItem

This article describes configuration options 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 options 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

colCount

The count of columns in the group layout.

Type:

Number

Default Value: 1
NOTE

For extra small screens, this option always equals 1 to make the widget adaptive. Specify the colCountByScreen option to override this logic.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "group",
            items: [ ... ],
            colCountByScreen: {
                xs: 2
            }
        },
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<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.

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 { }

colSpan

Specifies the number of columns spanned by the item.

Type:

Number

Default Value: undefined
See Also

component

An alias for the template option 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 option of the item.

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 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

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'
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 option 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 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.

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 option.
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.