Angular CardView - editing

Configures editing.

Selector: dxo-editing

Type:

The UI component can allow a user to add, update and delete data. To control which of these operations are allowed, use the allowAdding, allowUpdating and allowDeleting properties.

NOTE

Before allowing a user to add, update, and delete, make sure that your data source supports these actions.

View Demo

allowAdding

Specifies whether a user can add new cards.

Type:

Boolean

Default Value: false

allowDeleting

Specifies whether a user can delete cards.

Type:

Boolean

Default Value: false

allowUpdating

Specifies whether a user can update cards.

Type:

Boolean

Default Value: false

changes

An array of pending row changes.

Selector: dxi-change

Type:

Array<DataChange>

Default Value: []

This array can be changed from the UI with native JavaScript methods, or with UI component methods (addCard, editCard, deleteCard).

confirmDelete

Specifies if confirmation is required when a user deletes a row.

Type:

Boolean

Default Value: true

editCardKey

The key(s) of a card being edited.

Type: any

Default Value: null

Values for this property are taken from the data field(s) specified in the keyExpr property or the key property of the store.

form

Configures the form inside the editing popup.

Selector: dxo-form

Type:

Form Configuration

Default form editors depend on the columns' configuration. If the generated form does not meet your requirements, and you need to reorganize form items or set other form properties, specify it in the form object. To link a form item with a CardView field, assign identical values to the form.items.dataField and columns.dataField properties.

jQuery

index.js

$(function() {
    $("#cardViewContainer").dxCardView({
        // ...
        editing: {
            allowUpdating: true,
            form: {
                items: [{
                    itemType: "group",
                    caption: "Personal Data",
                    items: [
                        { dataField: "Prefix" },
                        { dataField: "Full_Name" },
                        { dataField: "Position" },
                        { dataField: "Duties", editorType: "dxTextArea" }
                    ]
                    // or simply
                    // items: ["Prefix", "Full_Name", "Position"]
                }, {
                    itemType: "group",
                    caption: "Contacts",
                    items: ["Email", "Skype"]
                }]
            }
        },
        columns: [ 
            { dataField: "Full_Name" }, 
            { dataField: "Prefix" },
            { dataField: "Position" },
            { dataField: "Duties" },
            { dataField: "Email" },
            { dataField: "Skype" } 
        ]
    });
});

Angular

app.component.html

<dx-card-view ... >
    <dxo-editing [allowUpdating]="true">
        <dxo-form>
            <dxi-item itemType="group" caption="Personal Data">
                <dxi-item dataField="Prefix"></dxi-item>
                <dxi-item dataField="Full_Name"></dxi-item>
                <dxi-item dataField="Position"></dxi-item>
                <dxi-item dataField="Duties" editorType="dxTextArea"></dxi-item>
            </dxi-item>
            <dxi-item itemType="group" caption="Contacts">
                <dxi-item dataField="Email"></dxi-item>
                <dxi-item dataField="Skype"></dxi-item>
            </dxi-item>
        </dxo-form>
    </dxo-editing>
    <dxi-column dataField="Full_Name"></dxi-column>
    <dxi-column dataField="Prefix"></dxi-column>
    <dxi-column dataField="Position"></dxi-column>
    <dxi-column dataField="Duties"></dxi-column>
    <dxi-column dataField="Email"></dxi-column>
    <dxi-column dataField="Skype"></dxi-column>
</dx-card-view>

Vue

App.vue

<template>
    <DxCardView ... >
        <DxEditing :allow-updating="true">
                <DxForm>
                    <DxItem itemType="group" caption="Personal Data">
                        <DxItem dataField="Prefix" />
                        <DxItem dataField="Full_Name" />
                        <DxItem dataField="Position" />
                        <DxItem dataField="Duties" editorType="dxTextArea" />
                    </DxItem>
                    <DxItem itemType="group" caption="Contacts">
                        <DxItem dataField="Email" />
                        <DxItem dataField="Skype" />
                    </DxItem>
                </DxForm>
        </DxEditing>
        <DxColumn data-field="Full_Name" />
        <DxColumn data-field="Prefix" />
        <DxColumn data-field="Position" />
        <DxColumn data-field="Duties" />
        <DxColumn data-field="Email" />
        <DxColumn data-field="Skype" />
    </DxCardView>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.light.css';
import DxCardView, { DxColumn, DxEditing, DxForm } from 'devextreme-vue/card-view';
import { DxItem } from 'devextreme-vue/form';
</script>

React

App.js

import React from 'react';

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

import CardView, {
    Column,
    Editing,
    Form
} from 'devextreme-react/card-view';
import { Item } from 'devextreme-react/form';

const App = () => {
    return (
        <CardView ... >
            <Editing allowUpdating={true}>
                <Form>
                    <Item itemType="group" caption="Personal Data">
                        <Item dataField="Prefix" />
                        <Item dataField="Full_Name" />
                        <Item dataField="Position" />
                        <Item dataField="Duties" editorType="dxTextArea" />
                    </Item>
                    <Item itemType="group" caption="Contacts">
                        <Item dataField="Email" />
                        <Item dataField="Skype" />
                    </Item>
                </Form>
            </Editing>
            <Column dataField="Prefix" />
            <Column dataField="Full_Name" />
            <Column dataField="Position" />
            <Column dataField="Duties" />
            <Column dataField="Email" />
            <Column dataField="Skype" />
        </CardView>
    );
}
export default App;

Do not specify the following properties in the form object:

readOnly (use columns[].allowEditing instead)
Event handlers (properties that start with "on..."), except for onInitialized and onContentReady

The colCount property defaults to 2, but can be redefined.

Angular

NOTE

The nested component that configures the form property does not support event bindings and two-way property bindings.

Vue

NOTE

The nested component that configures the form property does not support event bindings and two-way property bindings.

If you need to customize an individual form item, use the formItem object.

popup

Configures the editing popup.

Selector: dxo-popup

Type:

Popup Configuration

You can specify any Popup property in this object, but note that the following properties override the CardView's internal logic:

The popup always contains a form whose items are used for editing. Use the form property to customize the form's items.

Angular

NOTE

The nested component that configures the popup property does not support event bindings and two-way property bindings.

Vue

NOTE

The nested component that configures the popup property does not support event bindings and two-way property bindings.

View Demo

texts

Selector: dxo-texts

Type:

EditingTexts