Vue Form - GroupItem

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

• Form - Organize Simple Items in Groups

$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "group",
            items: [ ... ],
            colCountByScreen: {
                xs: 2
            }
        },
        // ...
        ]
    });
});

<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

• Columns within a Group

See Also

• Columns within a Group

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.

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.

The structure of the form item object depends on the value of this option.

This article describes the structure of an item whose type is "group". The following item types are also available.

• simple
  Simple item is an editor-label pair usually bound to a formData object field used to display and modify this field.

• tabbed
  Tabbed item is a tabbed panel whose tabs contain child form items. You can customize the layout options for each tab separately.

• empty
  Empty item is an empty span between neighboring items. You can specify the number of columns spanned by an empty item.

Use the name to access the form item in methods like itemOption(id).

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.

See Also

• Custom Content within a Group

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