DevExtreme React - In Groups

Create a Group

In the context of the Form widget, a group is called "group item". A group item can contain simple items, other groups, tabs or empty items. To create a group item, assign "group" to the itemType option. Items nested in the group are configured in the items array. To add a caption to the group, specify the caption option.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        items: [{
            itemType: "group",
            caption: "Personal Data",
            items: ["firstName", "lastName", "position"]
        }, {
            itemType: "group",
            caption: "Contacts",
            items: ["phone", "email"]
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee">
    <dxi-item
        itemType="group"
        caption="Personal Data">
            <dxi-item dataField="firstName"></dxi-item>
            <dxi-item dataField="lastName"></dxi-item>
            <dxi-item dataField="position"></dxi-item>
    </dxi-item>
    <dxi-item
        itemType="group"
        caption="Contacts">
            <dxi-item dataField="phone"></dxi-item>
            <dxi-item dataField="email"></dxi-item>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

View Demo

Columns within a Group

Items within a group can be organized in several columns. To specify the number of columns, use the colCount option. Note that the entire Form layout can also be organized in columns if the colCount option is declared on the root level. In this case, use the colSpan option to define how many general columns the group must span.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO",
            phone: "+1(213) 555-9392",
            email: "jheart@dx-email.com"
        },
        // Splits the Form layout in two columns
        colCount: 2,
        items: [{
            itemType: "group",
            caption: "Personal Data",
            // Makes this group span both general columns
            colSpan: 2,
            // Organizes items inside this group in three columns
            colCount: 3,
            items: ["firstName", "lastName", "position"]
        }, {
            itemType: "group",
            caption: "Contacts",
            items: ["phone", "email"]
        }]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="2"> <!-- Splits the Form layout in two columns -->
    <dxi-item
        itemType="group"
        caption="Personal Data"
        [colSpan]="2" <!-- Makes this group span both general columns -->
        [colCount]="3"> <!-- Organizes items inside this group in three columns -->
            <dxi-item dataField="firstName"></dxi-item>
            <dxi-item dataField="lastName"></dxi-item>
            <dxi-item dataField="position"></dxi-item>
    </dxi-item>
    <dxi-item
        itemType="group"
        caption="Contacts">
            <dxi-item dataField="phone"></dxi-item>
            <dxi-item dataField="email"></dxi-item>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO",
        phone: "+1(213) 555-9392",
        email: "jheart@dx-email.com"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Custom Content within a Group

The Form widget allows you to place custom content, for example, an image, under the group caption.

jQuery
JavaScript
$("#formContainer").dxForm({
    formData: {
        firstName: "John",
        lastName: "Heart",
        picture: "http://here/goes/the/picture.jpg"
    },
    colCount: 2,
    items: [{
        itemType: "group",
        caption: "Picture",
        template: function (data, itemElement) {
            $("<img>").attr("src", data.formData.picture)
                .appendTo(itemElement)
        }
    }, {
        itemType: "group",
        caption: "Personal Data",
        items: ["firstName", "lastName"]
    }]
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee">
    <dxi-item
        itemType="group"
        caption="Picture"
        [template]="'pictureTemplate'">
    </dxi-item>
    <dxi-item
        itemType="group"
        caption="Personal Data">
            <dxi-item dataField="firstName"></dxi-item>
            <dxi-item dataField="lastName"></dxi-item>
    </dxi-item>
    <div *dxTemplate="let data of 'pictureTemplate'">
        <img src="{{data.formData.picture}}">
    </div>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        picture: "http://here/goes/the/picture.jpg"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
See Also