A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/Form/Organize_Simple_Items/ below:

Vue Form - In Groups

Create a Group

In the context of the Form UI component, 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 property. Items nested in the group are configured in the items array. To add a caption to the group, specify the caption property.

jQuery 
$(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 
<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
    ],
    // ...
})
Vue 
<template>
    <DxForm :form-data="employee">
        <DxGroupItem caption="Personal Data">
            <DxSimpleItem data-field="firstName" />
            <DxSimpleItem data-field="lastName" />
            <DxSimpleItem data-field="position" />
        </DxGroupItem>
        <DxGroupItem caption="Contacts">
            <DxSimpleItem data-field="phone" />
            <DxSimpleItem data-field="email" />
        </DxGroupItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxGroupItem, DxSimpleItem } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxGroupItem, DxSimpleItem
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React 
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, GroupItem, SimpleItem } from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form formData={employee}>
                <GroupItem caption="Personal Data">
                    <SimpleItem dataField="firstName" />
                    <SimpleItem dataField="lastName" />
                    <SimpleItem dataField="position" />
                </GroupItem>
                <GroupItem caption="Contacts">
                    <SimpleItem dataField="phone" />
                    <SimpleItem dataField="email" />
                </GroupItem>
            </Form>
        );
    }
}

export default App;

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 property. Note that the entire Form layout can also be organized in columns if the colCount property is declared on the root level. In this case, use the colSpan property to define how many general columns the group must span.

jQuery 
$(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 
<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
    ],
    // ...
})
Vue 
<template>
    <DxForm
        :form-data="employee"
        :col-count="2">
        <DxGroupItem
            caption="Personal Data"
            :col-span="2"
            :col-count="3">
            <DxSimpleItem data-field="firstName" />
            <DxSimpleItem data-field="lastName" />
            <DxSimpleItem data-field="position" />
        </DxGroupItem>
        <DxGroupItem caption="Contacts">
            <DxSimpleItem data-field="phone" />
            <DxSimpleItem data-field="email" />
        </DxGroupItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxGroupItem, DxSimpleItem } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

export default {
    components: {
        DxForm, DxGroupItem, DxSimpleItem
    },
    data() {
        return {
            employee
        };
    },
};
</script>
React 
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, GroupItem, SimpleItem } from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    position: 'CEO',
    phone: '+1(213) 555-9392',
    email: 'jheart@dx-email.com'
};

class App extends React.Component {
    render() {
        return (
            <Form
                formData={employee}
                colCount={2}>
                <GroupItem
                    caption="Personal Data"
                    colSpan={2}
                    colCount={3}>
                    <SimpleItem dataField="firstName" />
                    <SimpleItem dataField="lastName" />
                    <SimpleItem dataField="position" />
                </GroupItem>
                <GroupItem caption="Contacts">
                    <SimpleItem dataField="phone" />
                    <SimpleItem dataField="email" />
                </GroupItem>
            </Form>
        );
    }
}

export default App;
Custom Content within a Group

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

jQuery 
$("#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 
<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
    ],
    // ...
})
Vue 
<template>
    <DxForm :form-data="employee">
        <template #pictureTemplate="{ data }">
            <img :src="data.formData.picture"/>
        </template>
        <DxGroupItem
            caption="Picture"
            template="pictureTemplate" />
        <DxGroupItem caption="Personal Data">
            <DxSimpleItem data-field="firstName" />
            <DxSimpleItem data-field="lastName" />
        </DxGroupItem>
    </DxForm>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxForm, DxGroupItem, DxSimpleItem } from 'devextreme-vue/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    picture: 'http://here/goes/the/picture.jpg'
};

export default {
    components: {
        DxForm, DxGroupItem, DxSimpleItem
    },
    data() {
        return {
            employee
        };
    }
};
</script>
React 
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Form, GroupItem, SimpleItem } from 'devextreme-react/form';

const employee = {
    firstName: 'John',
    lastName: 'Heart',
    picture: 'http://here/goes/the/picture.jpg'
};

class App extends React.Component {
    render() {
        return (
            <Form formData={employee}>
                <GroupItem
                    caption="Picture"
                    render={pictureRender} />
                <GroupItem caption="Personal Data">
                    <SimpleItem dataField="firstName" />
                    <SimpleItem dataField="lastName" />
                </GroupItem>
            </Form>
        );
    }
}

function pictureRender(data) {
    return (
        <img src={data.formData.picture}/>
    );
}

export default App;
See Also Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center. Thank you for the feedback!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4