DevExtreme Angular - Editors Values are not Saved

If an editor does not pass its value to the DataGrid or TreeList component and its DataSource when users enter or select a value, check if any of the following cases applies to your implementation.

A Column's dataField is Empty

Built-in column editors automatically write their values to the data row field specified in the column.dataField property. Specify this property if you want to write an editor's value to a field.

If you want to implement an unbound column, specify column.name instead of column.dataField and define the column.setCellValue callback to write values in a custom way.

jQuery
index.js
$('#gridContainer').dxDataGrid({
    // ...
    columns: [
        {   
            // ...
            setCellValue(newData, value, currentRowData) {
                newData.anyField = value;
            }
        }
    ]
});
Angular
app.component.html
app.component.ts
<dx-data-grid ... >
    <dxi-column ...
        [setCellValue]="setCellValue"
    >
    </dxi-column>
 </dx-data-grid>
export class AppComponent {
    export class AppComponent {
        setCellValue(newData, value, currentRowData) {
            newData.anyField = value;
        }
    }
}
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn ...
            :set-cell-value="setCellValue"
        />
    </DxDataGrid>
</template>

<script>
    import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid';

    export default {
        components: {
            DxDataGrid,
            DxColumn
        },
        // ...
        methods: {
            setCellValue(newData, value, currentRowData) {
                newData.anyField = value;
            }
        }
    };
</script>
React
App.js
import React from 'react';
import DataGrid, { Column } from 'devextreme-react/data-grid';

const setCellValue = (newData, value, currentRowData) => {
    newData.anyField = value;
}

function App() {
    render (
        <React.Fragment>
            <DataGrid ... >
                <Column ...
                    setCellValue={setCellValue}
                />
            </DataGrid>
        </React.Fragment>
    );
}

export default App;

You Use a Form Item's Template to Declare an Editor

Form and popup edit modes use the built-in Form component. Do not use simpleItem.template to replace default editors in DataGrid or TreeList, use column.editCellTemplate instead.

You Implement an Editor in the editCellTemplate Body

Call the e.setValue method available in the template's argument. This method notifies the DataGrid or TreeList component that the value of a custom editor has changed. If you use a DevExtreme editor in this template, call e.setValue inside the onValueChanged event handler of this editor.

Customize Editors in DataGrid Demo

You Implement an Editor in the cellTemplate Body

DataGrid or TreeList uses column.cellTemplate only to display a cell value. To place your custom editor into cells to allow users to edit them, use column.editCellTemplate. Refer to the previous topic section for more information.

If you want to always display editors in a column, enable the column.showEditorAlways option. DataGrid displays an editor (or editCellTemplate if it exists) and ignores cellTemplate.

You Handle the editorPreparing Event and Override onValueChanged

Call the built-in onValueChanged event handler for an editor or call the e.setValue method available in the event's argument.

jQuery
index.js
$('#gridContainer').dxDataGrid({
    // ...
    onEditorPreparing(e) {
        if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function (args) {
                e.setValue(args.value);
                // or
                defaultValueChangeHandler(args);
            }
        }
    }
});
Angular
app.component.html
app.component.ts
<dx-data-grid ... 
    (onEditorPreparing)="onEditorPreparing($event)"
>
</dx-data-grid>
export class AppComponent {
    export class AppComponent {
        onEditorPreparing(e) {
            if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function (args) {
                    e.setValue(args.value);
                    // or
                    defaultValueChangeHandler(args);
                }
            }
        }
    }
}
Vue
App.vue
<template>
    <DxDataGrid ... 
        @editor-preparing="onEditorPreparing"
    />
</template>

<script>
    import { DxDataGrid } from 'devextreme-vue/data-grid';

    export default {
        components: {
            DxDataGrid
        },
        // ...
        methods: {
            onEditorPreparing(e) {
                if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
                    const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                    e.editorOptions.onValueChanged = function (args) {
                        e.setValue(args.value);
                        // or
                        defaultValueChangeHandler(args);
                    }
                }
            }
        }
    };
</script>
React
App.js
import React from 'react';
import DataGrid from 'devextreme-react/data-grid';

onEditorPreparing = (e) => {
    if (e.dataField === 'requiredDataField' && e.parentType === 'dataRow') {
        const defaultValueChangeHandler = e.editorOptions.onValueChanged;
        e.editorOptions.onValueChanged = function (args) {
            e.setValue(args.value);
            // or
            defaultValueChangeHandler(args);
        }
    }
}

function App() {
    render (
        <React.Fragment>
            <DataGrid ... 
                onEditorPreparing={onEditorPreparing}
            />
        </React.Fragment>
    );
}

export default App;
See Also