Angular DataGrid - Editing

NOTE

You must specify the DataGrid's keyExpr or the Store's key property to ensure that editing works properly.

User Interaction

Users can add, delete, and update grid data. To enable these operations, assign true to the corresponding fields of the editing object. You can set a column's allowEditing property to false if its data should not be edited.

Grid data can be edited in several modes. Set the editing.mode property to specify the mode.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            allowUpdating: true, 
            allowAdding: true, 
            allowDeleting: true,
            mode: 'row' // 'batch' | 'cell' | 'form' | 'popup'
        },
        columns: [
            { dataField: 'id', allowEditing: false },
            // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-editing
        [allowUpdating]="true"
        [allowAdding]="true"
        [allowDeleting]="true"
        mode="row"> <!-- 'batch' | 'cell' | 'form' | 'popup' -->
    </dxo-editing>
    <dxi-column dataField="id" [allowEditing]="false"></dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing
            :allow-updating="true"
            :allow-adding="true"
            :allow-deleting="true"
            mode="row" /> <!-- 'batch' | 'cell' | 'form' | 'popup' -->
        <DxColumn data-field="id" :allow-editing="false" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxEditing,
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxEditing,
        DxColumn
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Editing,
    Column
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Editing
                    allowUpdating={true}
                    allowAdding={true}
                    allowDeleting={true}
                    mode="row" /> {/* 'batch' | 'cell' | 'form' | 'popup' */}
                <Column dataField="id" allowEditing={false} />
            </DataGrid>
        );
    }
}
export default App;

The following sections detail the DataGrid's appearance and behavior in each editing mode.

Row Mode

In this mode a user edits data row by row. When a user clicks an "Edit" button, the corresponding row enters the editing state, and the "Save" and "Cancel" buttons appear in the edit column. The UI component saves changes only if the "Save" button is clicked. If a user starts editing another row, sorts or filters data, it discards the changes.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Row Mode Editing State

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. confirmDelete property to hide this dialog.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            // ...
            mode: 'row',
            allowDeleting: true,
            confirmDelete: false
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-editing 
        mode="row" 
        [allowDeleting]="true"
        [confirmDelete]="false">
    </dxo-editing>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing
            mode="row"
            :allow-deleting="true"
            :confirm-delete="false"
        />
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid, 
        DxEditing
    },
    data() {}
}
</script>

React

App.js

import React from 'react';

import { DataGrid, Editing } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Editing
                    mode="row"
                    confirmDelete={false}
                    allowDeleting={true} 
                />
            </DataGrid>
        );
    }
}
export default App;

View Demo

Cell Mode

In the cell mode, a user edits data cell by cell. Changes are saved once a cell loses the focus, or discarded if a user presses Esc. An added row is saved only when the focus is shifted from it. Choose this mode if any changes should be saved to the data source immediately.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Cell Mode

If you validate data, a cell is locked in the editing state until a user enters a valid value or clicks the "Cancel Changes" button.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Cell Mode Validation

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. Use the confirmDelete property to hide this dialog.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            mode: 'cell', 
            confirmDelete: false
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-editing 
        mode="cell" 
        [allowDeleting]="true"
        [confirmDelete]="false">
    </dxo-editing>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing
            mode="row"
            :allow-deleting="true"
            :confirm-delete="false"
        />
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid, 
        DxEditing
    },
    data() {}
}
</script>

React

App.js

import React from 'react';

import { DataGrid, Editing } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Editing
                    mode="row"
                    confirmDelete={false}
                    allowDeleting={true} 
                />
            </DataGrid>
        );
    }
}
export default App;

View Demo

Batch Mode

In the batch mode, like in the cell mode, a user edits data cell by cell. However, in this mode, the UI component stores changes in a buffer until a user clicks the global "Save" button instead of saving them immediately. This mode is useful when you need to defer saving multiple changes.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Batch Mode

When a user clicks a row's "Delete" button, the UI component only marks the row as deleted. Users can restore this row by clicking the "Undelete" button if they have not saved the changes yet. They can also discard all unsaved changes by clicking the "Revert" button.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Batch Mode Deletion

View Demo View on GitHub

Form Mode

In form edit mode, row cells become editable form fields. Form fields are sorted like columns in the columns array.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Form Mode

The DataGrid uses the DevExtreme Form UI component. To configure the form, specify any Form properties in the editing.form object except properties mentioned in the description of this object. Refer to the following help topic for more information about form customization: Customize Edit Form.

For example, you can specify groups, tabs, or leave items ungrouped.

NOTE

The recommended way is to wrap all items in groups.

In the following code, the items with the specified dataField are simple items. Identical dataFields connect a simple item with a column:

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            allowUpdating: true,
            mode: "form",
            form: {
                items: [{
                    itemType: "group",
                    caption: "Personal Data",
                    items: [
                        { dataField: "Prefix" },
                        { dataField: "Full_Name" },
                        { dataField: "Position" },
                        { dataField: "Duties", editorType: "dxTextArea" }
                    ]
                    // or just
                    // 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

HTML

TypeScript

<dx-data-grid ... >
    <dxo-editing
        [allowUpdating]="true"
        mode="form">
        <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-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing
            :allow-updating="true"
            mode="form">
            <DxForm>
                <DxGroupItem caption="Personal Data">
                    <DxSimpleItem data-field="Prefix" />
                    <DxSimpleItem data-field="Full_Name" />
                    <DxSimpleItem data-field="Position" />
                    <DxSimpleItem data-field="Duties" editor-type="dxTextArea" />
                </DxGroupItem>
                <DxGroupItem caption="Contacts">
                    <DxSimpleItem data-field="Email" />
                    <DxSimpleItem data-field="Skype" />
                </DxGroupItem>
            </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" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxEditing,
    DxForm,
    DxColumn
} from 'devextreme-vue/data-grid';

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

import 'devextreme-vue/text-area';

export default {
    components: {
        DxDataGrid,
        DxEditing,
        DxForm,
        DxColumn,
        DxSimpleItem,
        DxGroupItem
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Editing,
    Form,
    Column
} from 'devextreme-react/data-grid';

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

import 'devextreme-react/text-area';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Editing
                    allowUpdating={true}
                    mode="form">
                    <Form>
                        <GroupItem caption="Personal Data">
                            <SimpleItem dataField="Prefix" />
                            <SimpleItem dataField="Full_Name" />
                            <SimpleItem dataField="Position" />
                            <SimpleItem dataField="Duties" editorType="dxTextArea" />
                        </GroupItem>
                        <GroupItem caption="Contacts">
                            <SimpleItem dataField="Email" />
                            <SimpleItem dataField="Skype" />
                        </GroupItem>
                    </Form>
                </Editing>
                <Column dataField="Full_Name" />
                <Column dataField="Prefix" />
                <Column dataField="Position" />
                <Column dataField="Duties" />
                <Column dataField="Email" />
                <Column dataField="Skype" />
            </DataGrid>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()
    // ...
    .Editing(e => e
        .AllowUpdating(true)
        .Mode(GridEditMode.Form)
        .Form(f => f
            .Items(i => {
                i.AddGroup()
                    .Caption("Personal Data")
                    .Items(groupItems => {
                        groupItems.AddSimple().DataField("Prefix");
                        groupItems.AddSimple().DataField("Full_Name");
                        groupItems.AddSimple().DataField("Position");
                        groupItems.AddSimple().DataField("Duties")
                            .Editor(e => e.TextArea());
                    });
                i.AddGroup()
                    .Caption("Contacts")
                    .Items(groupItems => {
                        groupItems.AddSimple().DataField("Email");
                        groupItems.AddSimple().DataField("Skype");
                    });
            })
        )
    )
    .Columns(cols => {
        cols.Add().DataField("Full_Name");
        cols.Add().DataField("Prefix");
        cols.Add().DataField("Position");
        cols.Add().DataField("Duties");
        cols.Add().DataField("Email");
        cols.Add().DataField("Skype");
    })
)

You can use a column's formItem object to customize an individual simple item. See an example in its description.

If you need to validate form values, specify validation rules as described in the Data Validation article.

View Demo View on GitHub

Popup Mode

The popup mode is the form mode with the form placed in a popup window.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Popup Mode

Use the editing.popup object to customize the popup window. This object can contain the Popup UI component's fields. However, you should refer to the popup object's description for information on restrictions that apply.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            allowUpdating: true,
            mode: "popup",
            form: {
                labelLocation: "top"
            },
            popup: {
                showTitle: true,
                title: "Row in the editing state"
            }
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxo-editing
        [allowUpdating]="true"
        mode="popup">
        <dxo-form labelLocation="top"></dxo-form>
        <dxo-popup [showTitle]="true" title="Row in the editing state"></dxo-popup>
    </dxo-editing>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing
            :allow-updating="true"
            mode="popup">
            <DxForm
                label-location="top"
            />
            <DxPopup
                :show-title="true"
                title="Row in the editing state"
            />
        </DxEditing>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxEditing,
    DxForm,
    DxPopup
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxEditing,
        DxForm,
        DxPopup
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Editing,
    Form,
    Popup
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Editing
                    allowUpdating={true}
                    mode="popup">
                    <Form
                        labelLocation="top"
                    />
                    <Popup
                        showTitle={true}
                        title="Row in the editing state"
                    />
                </Editing>
            </DataGrid>
        );
    }
}
export default App;

Since the popup and form modes are very similar, you can use the same columns.formItem and editing.form properties to customize items and layout in both modes. See the Form Mode topic for more details on form customization.

View Demo View on GitHub

The built-in form of the Popup and Form modes has limited functionality. If you want to further customize the form (add custom labels and buttons, apply advanced validation rules and masks, etc.), implement the Form component inside Popup.

View on GitHub

API

Add

Use the addRow() method to add an empty row.

jQuery

JavaScript

$("#dataGridContainer").dxDataGrid("addRow");

Angular

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    addRow () {
       this.dataGrid.instance.addRow();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ...
        ref="myDataGrid">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        addNewRow() {
            this.$refs['myDataGrid'].instance.addRow();
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();
        this.addNewRow = this.addNewRow.bind(this);
    }

    addNewRow() {
        this.dataGridRef.current.instance().addRow();
    }

    render() {
        return (
            <DataGrid ...
                ref={this.dataGridRef}>
            </DataGrid>
        );
    }
}
export default App;

You can specify initial values for a newly added row in the onInitNewRow event handler.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "Hire_Date",
            dataType: "date"
        },
            // ...
        ],
        onInitNewRow: function(e) {
            e.data.Hire_Date = new Date();
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ...
    (onInitNewRow)="onInitNewRow($event)">
    <dxi-column dataField="Hire_Date" dataType="date"></dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onInitNewRow (e) {
        e.data.Hire_Date = new Date();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ...
        @init-new-row="setHireDate">
        <DxColumn data-field="Hire_Date" data-type="date" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    methods: {
        setHireDate(e) {
            e.data.Hire_Date = new Date();
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';

class App extends React.Component {
    setHireDate(e) {
        e.data.Hire_Date = new Date();
    }

    render() {
        return (
            <DataGrid ...
                onInitNewRow={this.setHireDate}>
                <Column dataField="Hire_Date" dataType="date" />
            </DataGrid>
        );
    }
}
export default App;

Update

The cellValue(rowIndex, visibleColumnIndex, value) method updates a cell's value. This cell can be located using its row and column indexes. If the cell's data field is known, you can pass it instead of the column index. After a value is updated, save it to the data source by calling the saveEditData() method.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({ ... });

    $("#updateCellButton").dxButton({
        text: "Update Cell",
        onClick: function() {
            $("#dataGridContainer").dxDataGrid("cellValue", 1, "Position", "CTO");
            $("#dataGridContainer").dxDataGrid("saveEditData");
        }
    });
});

Angular

TypeScript

HTML

import { DxDataGridModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    updateCell () {
        this.dataGrid.instance.cellValue(1, "Position", "CTO");
        this.dataGrid.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxButtonModule
    ],
    // ...
})

<dx-data-grid ... ></dx-data-grid>
<dx-button
    text="Update Cell"
    (onClick)="updateCell()">
</dx-button>

Vue

App.vue

<template>
    <div>
        <DxDataGrid ...
            :ref="dataGridRefKey">
        </DxDataGrid>
        <DxButton
            text="Update Cell"
            @click="updateCell"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';

const dataGridRefKey = 'myDataGrid';

export default {
    components: {
        DxDataGrid,
        DxButton
    },
    data: function() {
        return {
            dataGridRefKey
        }
    },
    methods: {
        updateCell() {
            this.dataGrid.cellValue(1, "Position", "CTO");
            this.dataGrid.saveEditData();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();
        this.updateCell = this.updateCell.bind(this);
    }

    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    updateCell() {
        this.dataGrid.cellValue(1, "Position", "CTO");
        this.dataGrid.saveEditData();
    }

    render() {
        return (
            <React.Fragment>
                <DataGrid ...
                    ref={this.dataGridRef}>
                </DataGrid>
                <Button
                    text="Update Cell"
                    onClick={this.updateCell}
                />
            </React.Fragment>
        );
    }
}
export default App;

To process an updated cell value before saving it to the data source, implement the columns.setCellValue function. Refer to the function's description for an example.

You can check if there are any unsaved changes by calling the hasEditData() method. Use the saveEditData() or cancelEditData() method to save or cancel them, respectively.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({ ... });

    $("#saveChangesButton").dxButton({
        text: "Save changes",
        onClick: function() {
            var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
            if(dataGrid.hasEditData()) {
                dataGrid.saveEditData().then(() => {
                    if(!dataGrid.hasEditData()) {
                        // Saved successfully
                    } else {
                        // Saving failed
                    }
                });
            }
        }
    });
});

Angular

TypeScript

HTML

import { DxDataGridModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    saveEditData() {
        if(this.dataGrid.instance.hasEditData()) {
            this.dataGrid.instance.saveEditData().then(() => {
                if(!this.dataGrid.instance.hasEditData()) {
                    // Saved successfully
                } else {
                    // Saving failed
                }
            });
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxButtonModule
    ],
    // ...
})

<dx-data-grid ... ></dx-data-grid>
<dx-button
    text="Save changes"
    (onClick)="saveEditData()">
</dx-button>

Vue

App.vue

<template>
    <div>
        <DxDataGrid ...
            :ref="dataGridRefKey">
        </DxDataGrid>
        <DxButton
            text="Save changes"
            @click="saveChanges"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';

const dataGridRefKey = 'myDataGrid';

export default {
    components: {
        DxDataGrid,
        DxButton
    },
    data: function() {
        return {
            dataGridRefKey
        }
    },
    methods: {
        saveChanges() {
            if(this.dataGrid.hasEditData()) {
                this.dataGrid.saveEditData().then(() => {
                    if(!this.dataGrid.hasEditData()) {
                        // Saved successfully
                    } else {
                        // Saving failed
                    }
                });
            }
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();
        this.saveChanges = this.saveChanges.bind(this);
    }

    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    saveChanges() {
        if(this.dataGrid.hasEditData()) {
            this.dataGrid.saveEditData().then(() => {
                if(!this.dataGrid.hasEditData()) {
                    // Saved successfully
                } else {
                    // Saving failed
                }
            });
        }
    }

    render() {
        return (
            <React.Fragment>
                <DataGrid ...
                    ref={this.dataGridRef}>
                </DataGrid>
                <Button
                    text="Save changes"
                    onClick={this.saveChanges}
                />
            </React.Fragment>
        );
    }
}
export default App;

jQuery

Call Methods

Angular

Call Methods

Vue

Call Methods

React

Call Methods

Delete

Call the deleteRow(rowIndex) method to delete a specific row from the data source. This method invokes a confirmation dialog that allows a user to cancel deletion. The confirmDelete property allows you to hide this dialog instantly deleting the selected row from the data source.

jQuery

JavaScript

$(function() {
    var dataGrid = $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            mode: "row", 
            allowDeleting: true,
            confirmDelete: false
        }
    }).dxDataGrid("instance");

    $("#deleteRowButton").dxButton({
        text: "Delete Row",
        onClick: function() {
            // Deletes the second row
            dataGrid.deleteRow(1);
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid>
    <dxo-editing
        mode="row"
        [allowDeleting]="true"
        [confirmDelete]="false">
    </dxo-editing>
</dx-data-grid>
<dx-button
    text="Delete Row"
    (onClick)="deleteRow()">
</dx-button>

import { DxDataGridModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    deleteRow () {
        // Deletes the second row
        this.dataGrid.instance.deleteRow(1);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxButtonModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid
        ref="dataGrid">
        <DxEditing
            mode="row"
            :allow-deleting="true"
            :confirm-delete="false"
        />
    </DxDataGrid>
    <DxButton
        text="Delete Row"
        @click="deleteRow"
    />
</template>

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

import DxButton from 'devextreme-vue/button';

export default {
    components: {
        DxDataGrid, 
        DxEditing,
        DxButton
    },
    methods: {
        deleteRow() {
            this.$refs.dataGrid.instance.deleteRow(1);
        }
    },
    data() {}
}
</script>

React

App.js

import React from 'react';

import { DataGrid, Editing } from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.dataGridRef = React.createRef();
        this.deleteRow = this.deleteRow.bind(this);
    }
    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    deleteRow() {
        this.dataGrid.deleteRow(1);
    }

    render() {
        return (
            <DataGrid  
                ref={this.dataGridRef}>
                <Editing
                    mode="row"
                    confirmDelete={false}
                    allowDeleting={true} 
                />
            </DataGrid>
            <Button
                text="Delete Row"
                onClick={this.deleteRow}
            />
        );
    }
}
export default App;

Note that in batch mode a row is only marked as deleted. To save changes, call the saveEditData() method. Calling the undeleteRow(rowIndex) method cancels row deletion.

jQuery

JavaScript

$("#dataGridContainer").dxDataGrid("undeleteRow", 1);

Angular

TypeScript

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    undeleteRow () {
        this.dataGrid.instance.undeleteRow(1);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid
        ref="dataGrid">
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid
    },
    methods: {
        undeleteRow() {
            this.$refs.dataGrid.instance.undeleteRow(1);
        }
    },
    data() {}
}
</script>

React

App.js

import React from 'react';

import { DataGrid } from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.dataGridRef = React.createRef();
        this.undeleteRow = this.undeleteRow.bind(this);
    }
    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    undeleteRow() {
        this.dataGrid.undeleteRow(1);
    }

    render() {
        return (
            <DataGrid  
                ref={this.dataGridRef}
            />
        );
    }
}
export default App;

jQuery

Call Methods

Angular

Call Methods

Vue

Call Methods

React

Call Methods

Get Current Cell Values

To get current cell values, call the cellValue(rowIndex, dataField) method. If a cell is being edited, this method returns the unsaved cell value.

The cellValue(rowIndex, dataField) method requires a row index. Use the getRowIndexByKey(key) method to use a key to get the row index. Obtaining the key to use depends on your particular scenario. If you want to get the key of the row being edited, you can use the parameter passed to the onEditingStart event handler:

jQuery

index.js

$(function() {
    var editRowKey;
    var dataGridInstance = $("#dataGridContainer").dxDataGrid({
        // ...
        onEditingStart: function(e) {
            editRowKey = e.key;
        }
    }).dxDataGrid("instance");
    // ...
    var editRowIndex = dataGridInstance.getRowIndexByKey(editRowKey);
    var cellValue = dataGridInstance.cellValue(editRowIndex, "EmployeeName");
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ...
    (onEditingStart)="onEditingStart($event)">
</dx-data-grid>

import { Component, ViewChild } from "@angular/core";
import { DxDataGridComponent } from "devextreme-angular";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }, { static: false }) dataGrid: DxDataGridComponent
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent

    editRowKey: number;

    onEditingStart(e) {
        this.editRowKey = e.key;
        // ...
    }

    getCellValue() {
        const editRowIndex = this.dataGrid.instance.getRowIndexByKey(this.editRowKey);
        if(editRowIndex >= 0) {
            return this.dataGrid.instance.cellValue(editRowIndex, "EmployeeName");
        }
        return null;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey"
        @editing-start="onEditingStart">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

const dataGridRefKey = 'myDataGrid';

export default {
    components: {
        DxDataGrid
    },
    data: function() {
        return {
            dataGridRefKey,
            editRowKey
        }
    },
    methods: {
        onEditingStart(e) {
            this.editRowKey = e.key;
            // ...
        },
        getCellValue() {
            const editRowIndex = this.dataGrid.getRowIndexByKey(this.editRowKey);
            if(editRowIndex >= 0) {
                return this.dataGrid.cellValue(editRowIndex, "EmployeeName");
            }
            return null;
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();
        this.getCellValue = this.getCellValue.bind(this);
        this.onEditingStart = this.onEditingStart.bind(this);
    }

    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    getCellValue() {
        const editRowIndex = this.dataGrid.getRowIndexByKey(this.state.editRowKey);
        if(editRowIndex >= 0) {
            return this.dataGrid.cellValue(editRowIndex, "EmployeeName");
        }
        return null;
    }

    onEditingStart(e) {
        this.setState({
            editRowKey: e.key
        });
        // ...
    }

    render() {
        return (
            <DataGrid ...
                ref={this.dataGridRef}
                onEditingStart={this.onEditingStart}>
            </DataGrid>
        );
    }
}
export default App;

To access a cell value after the user has edited it, but before it is saved to the data source, use the setCellValue function as an alternative. In addition to edited cell values, it allows you to get the cell values before user edits. setCellValue is set individually for each column.

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [
            // ...
            {
                dataField: "EmployeeName",
                setCellValue: function(newData, value, currentRowData) {
                    // currentRowData contains the row data before the edit
                    // value contains the edited value
                }
            }
        ]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >
    <dxi-column
        dataField="EmployeeName"
        [setCellValue]="setCellValue">
    </dxi-column>
</dx-data-grid>

import { Component } from "@angular/core";
import { DxDataGridComponent } from "devextreme-angular";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    setCellValue (newData, value, currentRowData) {
        // currentRowData contains the row data before the edit
        // value contains the edited value
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="EmployeeName"
            :set-cell-value="setCellValue"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    methods: {
        setCellValue(newData, value, currentRowData) {
            // currentRowData contains the row data before the edit
            // value contains the edited value
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';

class App extends React.Component {
    setCellValue(newData, value, currentRowData) {
        // currentRowData contains the row data before the edit
        // value contains the edited value
    }

    render() {
        return (
            <DataGrid ... >
                <Column
                    dataField="Full_Name"
                    setCellValue={this.setCellValue}
                />
            </DataGrid>
        );
    }
}
export default App;

jQuery

Call Methods

Angular

Call Methods

Vue

Call Methods

React

Call Methods

Events

The DataGrid UI component raises events before and after a row is inserted, updated or removed from the data source. If the event handlers are going to remain unchanged during the UI component's lifetime, assign them to corresponding onEventName properties:

jQuery

JavaScript

$(function(){
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowInserting: function(e) {
            // Handler of the "rowInserting" event
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ...
    (onRowInserting)="onRowInserting($event)">
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onRowInserting (e) {
        // Handler of the "rowInserting" event
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ...
        @row-inserting="onRowInserting">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        onRowInserting(e) {
            // Handler of the "rowInserting" event
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    onRowInserting(e) {
        // Handler of the "rowInserting" event
    }

    render() {
        return (
            <DataGrid ...
                onRowInserting={this.onRowInserting}>
            </DataGrid>
        );
    }
}
export default App;

jQuery

If you are going to change the event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method.

JavaScript

var rowUpdatingEventHandler1 = function(e) {
    // First handler of the "rowUpdating" event
};

var rowUpdatingEventHandler2 = function(e) {
    // Second handler of the "rowUpdating" event
};

$("#dataGridContainer").dxDataGrid("instance")
    .on("rowUpdating", rowUpdatingEventHandler1)
    .on("rowUpdating", rowUpdatingEventHandler2);

In addition, the DataGrid raises the initNewRow event when a new row is added and the editingStart event when a row enters the editing state. These events can be handled just like others - using the onEventName property or the on(eventName, eventHandler) method. In the following example, the onInitNewRow event handler specifies initial values for an added row:

jQuery

JavaScript

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onInitNewRow: function(e) { // Handler of the "initNewRow" event
            // Sets an initial value for the "Hire_Date" field
            e.data.Hire_Date = new Date();
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ...
    (onInitNewRow)="onInitNewRow($event)">
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onInitNewRow (e) { // Handler of the "initNewRow" event
        // Sets an initial value for the "Hire_Date" field
        e.data.Hire_Date = new Date();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ...
        @init-new-row="onInitNewRow">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        onInitNewRow(e) { // Handler of the "initNewRow" event
            // Sets an initial value for the "Hire_Date" field
            e.data.Hire_Date = new Date();
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    onInitNewRow(e) { // Handler of the "initNewRow" event
        // Sets an initial value for the "Hire_Date" field
        e.data.Hire_Date = new Date();
    }

    render() {
        return (
            <DataGrid ...
                onInitNewRow={this.onInitNewRow}>
            </DataGrid>
        );
    }
}
export default App;

jQuery

Handle Events

Angular

Event Handling

Vue

Event Handling

React

Event Handling

Customize Editors

The columns's dataType defines a cell's editor that can be configured using the editorOptions object. However, this object cannot be used to change the editor's type or onValueChanged event handler. Instead, use the onEditorPreparing function as shown in the following code. The function's parameter provides the editorName and editorOptions fields for changing the used editor and its configuration.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "Note",
            editorOptions: {
                height: 200
            }
        }, // ...
        ],
        onEditorPreparing: function(e) {
            if (e.dataField == "Note" && e.parentType === "dataRow") {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorName = "dxTextArea"; // Change the editor's type
                e.editorOptions.onValueChanged = function (args) {  // Override the default handler
                    // ...
                    // Custom commands go here
                    // ...
                    // If you want to modify the editor value, call the setValue function:
                    // e.setValue(newValue);
                    // Otherwise, call the default handler:
                    defaultValueChangeHandler(args);
                }
            }
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ...
    (onEditorPreparing)="onEditorPreparing($event)">
    <dxi-column
        dataField="Note"
        [editorOptions]="{ height: 200 }">
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule, DxTextAreaModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditorPreparing (e) {
        if (e.dataField == "Note" && e.parentType === "dataRow") {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorName = "dxTextArea"; // Change the editor's type
            e.editorOptions.onValueChanged = function (args) {  // Override the default handler
                // ...
                // Custom commands go here
                // ...
                // If you want to modify the editor value, call the setValue function:
                // e.setValue(newValue);
                // Otherwise, call the default handler:
                defaultValueChangeHandler(args);
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxTextAreaModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ...
        @editor-preparing="onEditorPreparing">
        <DxColumn
            data-field="Note"
            :editor-options="textAreaOptions"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';
import 'devextreme-vue/text-area';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return {
            textAreaOptions: { height: 200 }
        }
    },
    methods: {
        onEditorPreparing(e) {
            if(e.dataField == "Note" && e.parentType === "dataRow") {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorName = "dxTextArea"; // Change the editor's type
                e.editorOptions.onValueChanged = function (args) {  // Override the default handler
                    // ...
                    // Custom commands go here
                    // ...
                    // If you want to modify the editor value, call the setValue function:
                    // e.setValue(newValue);
                    // Otherwise, call the default handler:
                    defaultValueChangeHandler(args);
                }
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';
import 'devextreme-react/text-area';

class App extends React.Component {
    textAreaOptions = { height: 200 };
    onEditorPreparing(e) {
        if(e.dataField == "Note" && e.parentType === "dataRow") {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorName = "dxTextArea"; // Change the editor's type
            e.editorOptions.onValueChanged = function (args) {  // Override the default handler
                // ...
                // Custom commands go here
                // ...
                // If you want to modify the editor value, call the setValue function:
                // e.setValue(newValue);
                // Otherwise, call the default handler:
                defaultValueChangeHandler(args);
            }
        }
    }

    render() {
        return (
            <DataGrid ...
                onEditorPreparing={this.onEditorPreparing}>
                <Column
                    dataField="Note"
                    editorOptions={this.textAreaOptions}
                />
            </DataGrid>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        // ...
        cols.Add().DataField("Note")
            .EditorOptions(new { height = 200 });
    })
    .OnEditorPreparing("dataGrid_editorPreparing")
)

<script type="text/javascript">
    function dataGrid_editorPreparing(e) {
        if (e.dataField == "Note" && e.parentType === "dataRow") {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorName = "dxTextArea"; // Change the editor's type
            e.editorOptions.onValueChanged = function (args) {  // Override the default handler
                // ...
                // Custom commands go here
                // ...
                // If you want to modify the editor value, call the setValue function:
                // e.setValue(newValue);
                // Otherwise, call the default handler:
                defaultValueChangeHandler(args);
            }
        }
    }
</script>

Implement the column's editCellTemplate for more extensive customization. In this template, you should specify your custom component's appearance and behavior in full. The following code uses the template to substitute the Switch UI component for a default editor.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "isChecked",
            editCellTemplate: function(cellElement, cellInfo) {
                $("<div />").dxSwitch({
                    width: 50,
                    switchedOnText: "YES",
                    switchedOffText: "NO",
                    value: cellInfo.value,
                    onValueChanged: function(e) {
                        cellInfo.setValue(e.value);
                    }
                }).appendTo(cellElement);
            }
        }],
        editing: {
            mode: "batch",
            allowUpdating: true
        }
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column
        dataField="isChecked"
        editCellTemplate="editCellTemplate">
    </dxi-column>
    <div *dxTemplate="let cellInfo of 'editCellTemplate'">
        <dx-switch
            [width]="50"
            switchedOnText="YES"
            switchedOffText="NO"
            [(value)]="cellInfo.value"
            (onValueChanged)="setEditedValue($event, cellInfo)">
        </dx-switch>
    </div>
    <dxo-editing mode="batch" [allowUpdating]="true"></dxo-editing>
</dx-data-grid>

import { DxDataGridModule, DxSwitchModule } from "devextreme-angular";
// ...
export class AppComponent {
    setEditedValue (valueChangedEventArg, cellInfo) {
        cellInfo.setValue(valueChangedEventArg.value);
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule,
        DxSwitchModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="isChecked"
            edit-cell-template="switch"
        />
        <template #switch="{ data }">
            <DxSwitch
                :width="50"
                switched-on-text="YES"
                switched-off-text="NO"
                :value="data.value"
                @value-changed="setEditedValue($event, data)"
            />
        </template>
        <DxEditing
            mode="batch"
            :allow-updating="true"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn,
    DxEditing
} from 'devextreme-vue/data-grid';

import DxSwitch from 'devextreme-vue/switch';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxEditing,
        DxSwitch
    },
    methods: {
        setEditedValue(valueChangedEventArg, cellInfo) {
            cellInfo.setValue(valueChangedEventArg.value);
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Column,
    Editing
} from 'devextreme-react/data-grid';

import Switch from 'devextreme-react/switch';

class App extends React.Component {
    renderSwitch(cellInfo) {
        const setEditedValue = valueChangedEventArg => {
            cellInfo.setValue(valueChangedEventArg.value);
        }
        return (
            <Switch
                width={50}
                switchedOnText="YES"
                switchedOffText="NO"
                defaultValue={cellInfo.value}
                onValueChanged={setEditedValue}
            />
        )
    }

    render() {
        return (
            <DataGrid ... >
                <Column
                    dataField="isChecked"
                    editCellRender={this.renderSwitch}
                />
                <Editing
                    mode="batch"
                    allowUpdating={true}
                />
            </DataGrid>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        // ...
        cols.Add().DataField("isChecked")
            .EditCellTemplate(new TemplateName("edit-cells"));
    })
    .Editing(m => m.Mode(GridEditMode.Batch).AllowUpdating(true))
)

@using (Html.DevExtreme().NamedTemplate("edit-cells")) {
    @(Html.DevExtreme().Switch()
        .Width(50)
        .SwitchedOnText("YES")
        .SwitchedOffText("NO")
        .Value(new JS("value"))
        .OnValueChanged("function(e) { setValue(e.value) }")
    )
}

Editors are displayed in cells in the normal state too if you set the columns.showEditorAlways property to true.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "Hidden",
            dataType: "boolean",
            showEditorAlways: true
        }]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column
        dataField="Hidden"
        dataType="boolean"
        [showEditorAlways]="true">
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Hidden"
            data-type="boolean"
            :show-editor-always="true"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Column
                    dataField="Hidden"
                    dataType="boolean"
                    showEditorAlways={true}
                />
            </DataGrid>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        // ...
        cols.Add().DataField("Hidden")
            .DataType(GridColumnDataType.Boolean)
            .ShowEditorAlways(true);
    })
)

Customize Edit Form

DataGrid uses the Form component for editing in form and popup edit modes. The component automatically configures the built-in form based on column and editing settings. In general, you can use the Form API to work with built-in forms. However, you need to take DataGrid specifics into account.

Appearance and Editing

In the topics below you can find recommendations on how to customize the edit form in a most efficient way.

Form Layout Customization

This section demonstrates how to configure a form item's style and arrange items. We do not recommend that you use the options mentioned in this section to change the default editor's behavior. To customize the default editor, refer to the following section: Editor Customization.

If you need to implement minor changes (for example, apply a style to a form item, change item visibility, configure labels, specify a number of columns spanned by an item, etc.), use the columns[].formItem property.

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            allowUpdating: true,
            mode: "form"
        },
        columns: [
            {
                dataField: "ID",
                formItem: {
                    visible: false
                }
            }, {
                dataField: "Notes",
                formItem: {
                    colSpan: 2, 
                    cssClass: "custom-class",
                    editorType: 'dxTextArea',
                    label: {
                        location: "top"
                    },
                    editorOptions: {
                        height: 100,
                    },
                    ...
                }
            },
            // ...
        ]
    });
});

Angular

app.component.html

app.module.ts

<dx-data-grid ... >
    <dxo-editing
        [allowUpdating]="true"
        mode="form"
    >
    </dxo-editing>
    <dxi-column dataField="ID">
        <dxo-form-item [visible]="false">
        </dxo-form-item>
    </dxi-column>
    <dxi-column dataField="Notes">
        <dxo-form-item 
            [colSpan] = "2"
            cssClass = "custom-class"
            editorType = "dxTextArea"
            [editorOptions] = "{ height: 100 }"
        >
            <dxo-label location="top"></dxo-label>
        </dxo-form-item>
    </dxi-column>
</dx-data-grid>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing
            :allow-updating="true"
            mode="form"
        />
        <DxColumn data-field="ID">
            <DxFormItem :visible="false">
            </DxFormItem>
        </DxColumn>
        <DxColumn data-field="Notes">
            <DxFormItem 
                :col-span="2"
                css-class = "custom-class"
                editor-type = "dxTextArea"
                :editor-options = "columnEditorOptions"
            >
                <DxLabel location="top" />
            </DxFormItem>
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxEditing,
    DxColumn,
    DxFormItem,
    DxLabel
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxEditing,
        DxColumn,
        DxFormItem,
        DxLabel
    },
    data() {
        return {
            columnEditorOptions: { height: 100 }
        }
    }
    // ...
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Editing,
    Column,
    FormItem,
    Label
} from 'devextreme-react/data-grid';

const defaultEditorOptions = { height: 100 }

export default function App() {
    return (
        <DataGrid ... >
            <Editing
                allowUpdating={true}
                mode="form"
            />
            <Column dataField="ID">
                <FormItem visible={false} />
            </Column>
            <Column dataField="Notes">
                <FormItem 
                    colSpan={2}
                    cssClass="custom-class"
                    editorType="dxTextArea"
                    editorOptions="{ defaultEditorOptions }"
                >
                    <Label location="top" />
                </FormItem>
            </Column>
        </DataGrid>
    );
}

If you need to implement major changes (for example, arrange items and groups), use the editing.form property. Declare all items for a column object and specify the dataField property.

DataGrid automatically generates editors with the corresponding event handlers for form items based on column settings and other DataGrid options like onEditorPrepared. Do not use the editorOptions property for items that are bound to dataField in the editing.form configuration. You can add unbound items in the same way as regular Form components. Do not use editCellTemplate for unbound items.

You can refer to the following topic for information on how to arrange items in the Form component: Organize Simple Items. You can use the same technique to arrange items in the DataGrid editing form. Note that you should leave the formData property unspecified because DataGrid uses a built-in mechanism to manage edited data.

Editor Customization

DataGrid generates editors based on the columns[].dataType property. This section demonstrates how to change the default editor settings, configure built-in editors, or create your custom editor.

If you want to change the predefined editor properties, specify the columns[].editorOptions property that also affects filter row editors. Omit the onValueChanged handler in this property because the internal DataGrid implementation overrides it. The columns[].formItem.editorOptions property affects form items only.

NOTE

Leave the template property in formItem.editorOptions or columns[].editorOptions unspecified. To implement a custom template, use the editCellTemplate property instead.

View Demo

You can override the onValueChanged handler of the predefined editor and change its type. To accomplish this goal, handle the onEditorPreparing event.

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onEditorPreparing: function(e) {
            if (e.dataField === "Notes" && e.parentType === "dataRow") {
                e.editorName = "dxTextArea";
            }
            if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function(args) { // override the default handler
                    if (someCondition(e, args)) doSomething(e, args);
                    defaultValueChangeHandler(args);
                }
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ...
    (onEditorPreparing)="overrideOnValueChanged($event)">
</dx-data-grid>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    overrideOnValueChanged(e) {
        if (e.dataField === "Notes" && e.parentType === "dataRow") {
            e.editorName = "dxTextArea";
        }
        if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
            const defaultValueChangeHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function(args) { // override the default handler
                if (someCondition(e, args)) doSomething(e, args);
                defaultValueChangeHandler(args);
            }
        }
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }

Vue

App.vue

<template>
    <DxDataGrid ...
        @editor-preparing="overrideOnValueChanged">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    // ...
    methods: {
        overrideOnValueChanged(e) {
            if (e.dataField === "Notes" && e.parentType === "dataRow") {
                e.editorName = "dxTextArea";
            }
            if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
                const defaultValueChangeHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function(args) { // override the default handler
                    if (someCondition(e, args)) doSomething(e, args);
                    defaultValueChangeHandler(args);
                }
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';

const overrideOnValueChanged = (e) => {
    if (e.dataField === "Notes" && e.parentType === "dataRow") {
        e.editorName = "dxTextArea";
    }
    if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
        const defaultValueChangeHandler = e.editorOptions.onValueChanged;
        e.editorOptions.onValueChanged = function(args) { // override the default handler
            if (someCondition(e, args)) doSomething(e, args);
            defaultValueChangeHandler(args);
        }
    }
}

export default function App() {
    return (
        <DataGrid ... 
            onEditorPreparing={overrideOnValueChanged}
        >   
        </DataGrid>
    );
}

If you need to implement a custom editor for a specific data type (array, object, etc.), use the columns[].editCellTemplate property. It is important to allow users to input or change the column value. Handle this value change and use the setValue template parameter to change the corresponding cell value. The editCellTemplate property specifies one template for all editing modes.

View Demo

If you want to further customize the form (add custom labels and buttons, apply advanced validation rules and masks, etc.), implement the Form component inside Popup.

View on GitHub

Validation

DataGrid validation is based on validation rules in all edit modes. Refer to the following topic for more details about DataGrid validation: Data Validation.

NOTE

DataGrid validates only modified values.

DataGrid automatically applies rules defined for columns to editors in an edit form. If you define form items in the edit form, do not assign validation rules directly to form items since validation may work incorrectly. Do not specify FormItem.isRequired as DataGrid automatically specifies this property for all form items whose corresponding columns include RequiredRule.

jQuery

index.js

$("#dataGridContainer").dxDataGrid({
    columns: [{
        dataField: "Full_Name",
        validationRules: [{ type: "required" }] // correct
    }
    // ...
    ],
    editing: {
        form: {
            items: [{
                dataField: "Full_Name",
                validationRules: [{type: 'required'}] // incorrect
            }]
        }
    }
});

Angular

app.component.html

<dx-data-grid ... >
    <dxi-column dataField="Full_Name">
        <!-- correct -->
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxo-editing>
        <dxo-form>
            <dxi-item dataField="Full_Name">
                <!-- incorrect -->
                <dxi-validation-rule type="required">    
            </dxi-item>
        </dxo-form>
    </dxo-editing>
</dx-data-grid>

Vue

App.vue

<DxDataGrid ... >
    <DxColumn data-field="Full_Name">
        <!-- correct -->
        <DxRequiredRule />
    </DxColumn>
    <DxEditing>
        <DxForm>
            <DxItem dataField="Full_Name">
                <!-- incorrect -->
                <DxRequiredRule />
            </DxItem>
        </DxForm>
    </DxEditing>
</DxDataGrid>

React

App.js

<DataGrid ... >
    <Column dataField="Full_Name">
        <!-- correct -->
        <RequiredRule />
    </Column>
    <Editing>
        <Form>
            <Item dataField="Full_Name" >
                <!-- incorrect -->
                <RequiredRule />
            </Item>
        </Form>
    </Editing>
</DataGrid>

To display the validation summary, enable the form.showValidationSummary property.

If your form layout contains tabs, disable TabbedItem.tabPanelOptions.deferRendering so DataGrid can validate all editors in all tabs. Otherwise, validation rules are not executed for items under non-initialized tabs.

jQuery

index.js

$("#dataGridContainer").dxDataGrid({
    editing: {
        form: {
            items: [{
                itemType: "tabbed",
                tabPanelOptions: {
                    deferRendering: false,
                },
                tabs: [...]
            }]
        }
    }
});

Angular

app.component.html

<dx-data-grid ... >
    <dxo-editing>
        <dxo-form>
            <dxi-itemitemType="tabbed">
                <dxo-tab-panel-options [deferRendering]="false">
                </dxo-tab-panel-options>
                <dxi-tab></dxi-tab>
            </dxi-item>
        </dxo-form>
    </dxo-editing>
</dx-data-grid>

Vue

App.vue

<DxDataGrid ... >
    <DxEditing>
        <DxForm>
            <DxTabbedItem>
                <DxTabPanelOptions
                    :defer-rendering="false"
                />
                <DxTab></DxTab>
            </DxTabbedItem>
        </DxForm>
    </DxEditing>
</DxDataGrid>

React

App.js

<DataGrid ... >
    <Editing>
        <Form>
            <TabbedItem>
                <TabPanelOptions deferRendering={false} />
                <Tab></Tab>
            </Item>
        </Form>
    </Editing>
</DataGrid>

Save, Cancel, and Custom Buttons

Form and popup edit modes include built-in Save and Cancel buttons. If you want to execute custom code on a click on either button, specify the onSaving or onEditCanceling event handler, respectively. Assign true to the e.cancel parameter to cancel a pending Save or Cancel operation and keep the form or pop-up window open.

Specify editing.texts.cancelRowChanges and editing.texts.saveRowChanges properties to change Save and Cancel button captions.

To customize Save and Cancel buttons, you need to redefine them:

Popup edit mode
Add the editing.popup object to the DataGrid configuration object and declare Save, Cancel, and custom buttons in the popup.toolbarItems array.
Form edit mode
Add the editing.form object to the DataGrid configuration object and use the form.items array to arrange all items you want to display in the edit form. Then, add a simple item with a template containing a standalone Toolbar component. Declare buttons in this toolbar. Use the following CSS to hide built-in Save and Cancel buttons:
```
#gridForm .dx-datagrid-form-buttons-container {  
    display: none  
}
```

Finally, handle the button onClick event to call saveEditData and cancelEditData methods, respectively.

Refer to the following example to learn more:

View on GitHub

Dynamically Change Editor or Form Item Properties

The following articles include step-by-step instructions on how to dynamically modify editor or form item properties, hide form items, and disable editors based on another field’s value:

NOTE

The edit form gets data from the DataGrid record. Editors are initialized with the dataField value from the record a user edits. If you want to initialize editors of a new row with a specific value, specify the onInitNewRow option.

Advanced Customization

If you want to completely redesign the edit form or change its behavior, replace the edit form with a standalone Popup containing Form. See the following example for implementation details:

View on GitHub

Edit Form Limitations

Do not specify the following properties in the form object:

readOnly
Use column.allowEditing instead.
template for items that have a data field
Use column.editCellTemplate instead.
Any event handler (properties whose name starts with "on")
validationRules for items that have a data field
Assign validation rules to DataGrid columns.

formData
DataGrid uses internal binding logic for the edit form. You can call the cellValue method to get and set values.

jQuery

index.js

const grid = $("#data-grid-container").dxDataGrid("instance");
const key = grid.option("editing.editRowKey");
index = grid.getRowIndexByKey(key);
value = grid.cellValue(index, "CompanyName"); // get
grid.cellValue(index, "CompanyName", "new value"); //set

Disable Editing

DataGrid includes API that allows you to disable data editing within certain columns or rows, or within individual cells. The following sections demonstrate how you can use that API.

Column

Set a column's allowEditing property to false to disable data editing within a specific column.

jQuery

index.js

$(function() {
    $("#dataGrid").dxDataGrid({
        // ...
        columns: [
            {
                allowEditing: false,
                // ...
            }
        ] 
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid ... >
    <!-- ... -->
    <dxi-column [allowEditing]="false" ></dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent { ... }
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn :allowEditing="false" />
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid,
        DxColumn,
        // ...
    },
    // ...
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, { Column } from 'devextreme-react/data-grid';

function App() {
    return (
        <DataGrid ... >
            {/* ... */}
            <Column allowEditing={false} />
        </DataGrid>
    );
}

export default App;

Row

To disable data editing within a specific row, follow the steps below:

Handle the DataGrid's onEditingStart event.
Check the data parameter's values. If you want don't want users to edit this row, assign true to e.cancel.

jQuery

index.js

$(function() {
    $("#dataGrid").dxDataGrid({
        // ...
        onEditingStart(e) {
            e.cancel = e.data.Position === "CEO";
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid 
    // ...
    (onEditingStart)="onEditingStart($event)"
>   
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditingStart(e) {
        e.cancel = e.data.Position === "CEO";
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid 
        @editing-start="onEditingStart"
    >
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid,
        // ...
    },
    methods: {
        onEditingStart(e) {
            e.cancel = e.data.Position === "CEO";
        }
    }
    // ...
}
</script>

React

App.js

import React, { useCallback } from "react";
import 'devextreme/dist/css/dx.light.css';

import { DataGrid } from 'devextreme-react/data-grid';

function App() {
    // ...
    const onEditingStart = useCallback((e) => {
       e.cancel = e.data.Position === "CEO";
    }, []);

    return (
        <DataGrid 
            onEditingStart={onEditingStart}
        >
        </DataGrid>
    );
}

export default App;

DataGrid's editing mode defines whether to display an Edit button opposite every row. To hide this button, use the button's visible property. Assign a callback to this property and check row data within this function.

jQuery

index.js

$(function() {
    $("#dataGrid").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: [{
                name: "edit",
                visible: function(e) {
                    return e.row.data.Position !== "CEO";
                }
            }, "delete"]
        }],
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button name="edit" [visible]="hideEditButton" ></dxi-button>
        <dxi-button name="delete"></dxi-button>
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    hideEditButton(e) {
        return e.row.data.Position !== "CEO";
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn type="buttons">
            <DxButton name="edit" :visible="hideEditButton" />
            <DxButton name="delete" />
        </DxColumn>
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton,
        // ...
    },
    methods: {
        hideEditButton(e) {
            return e.row.data.Position !== "CEO";
        }
    }
    // ...
}
</script>

React

App.js

import React, { useCallback } from "react";
import 'devextreme/dist/css/dx.light.css';

import DataGrid, { Column, Button } from 'devextreme-react/data-grid';

function App() {
    // ...
    const hideEditButton = useCallback((e) => {
       return e.row.data.Position !== "CEO";
    }, []);

    return (
        <DataGrid ... >
            <Column type="buttons">
                <Button name="edit" visible={hideEditButton} />
                <Button name="delete" />
            </Column>
        </DataGrid>
    );
}

export default App;

Cell

Handle the DataGrid's onEditorPreparing event. Check the following parameters and set editorOptions.disabled as required:

parentType: the row type - "dataRow" or "filterRow"
dataField: the corresponding column
row.data: row data values
row.isNewRow: true, if the user is adding a new row

jQuery

index.js

$(function() {
    $("#dataGrid").dxDataGrid({
        // ...
        onEditorPreparing(e) {
            if (e.dataField === "LastName" && e.parentType === "dataRow") {
                e.editorOptions.disabled = e.row.data && e.row.data.FirstName === "";
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-data-grid 
    // ...
    (onEditorPreparing)="onEditorPreparing($event)"
>   
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditorPreparing(e) {
        if (e.dataField === "LastName" && e.parentType === "dataRow") {
            e.editorOptions.disabled = e.row.data && e.row.data.FirstName === "";
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid 
        @editor-preparing="onEditorPreparing"
    >
    </DxDataGrid>
</template>

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

export default {
    components: {
        DxDataGrid,
        // ...
    },
    methods: {
        onEditorPreparing(e) {
            if (e.dataField === "LastName" && e.parentType === "dataRow") {
                e.editorOptions.disabled = e.row.data && e.row.data.FirstName === "";
            }
        }
    }
    // ...
}
</script>

React

App.js

import React, { useCallback } from "react";
import 'devextreme/dist/css/dx.light.css';

import { DataGrid } from 'devextreme-react/data-grid';

function App() {
    // ...
    const onEditorPreparing = useCallback((e) => {
        if (e.dataField === "LastName" && e.parentType === "dataRow") {
            e.editorOptions.disabled = e.row.data && e.row.data.FirstName === "";
        }
    }, []);

    return (
        <DataGrid 
            onEditorPreparing={onEditorPreparing}
        >
        </DataGrid>
    );
}

export default App;

You may need an extra implementation step if the control uses an edit mode that activate multiple editors at once (such as the "Row" edit mode). Specify a setCellValue callback for the column whose values specify editor availability in other columns. That callback helps you refresh the editors - disable or enable them as needed - and keep the control in edit mode. Refer to the following topic for additional information: Dynamically Change Editor Properties in the Editing State.

Data Validation

User input is validated against a set of validation rules. You can configure them in a column's validationRules array. Validation rules are attached to the editors and do not depend on the current edit mode.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            dataField: "Full_Name",
            validationRules: [{ type: "required" }]
        }, {
            dataField: "Login",
            validationRules: [{ 
                type: "stringLength", 
                min: 3, 
                message: "Login should be at least 3 symbols long" 
            }]
        },
        // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column dataField="Full_Name">
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="Login">
        <dxi-validation-rule
            type="stringLength"
            [min]="3"
            message="Login should be at least 3 symbols long" >
        </dxi-validation-rule>
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxDataGrid ... >
        <DxColumn data-field="Full_Name">
            <DxRequiredRule />
        </DxColumn>
        <DxColumn data-field="Login">
            <DxStringLengthRule
                :min="3"
                message="Login should be at least 3 symbols long"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn,
    DxRequiredRule,
    DxStringLengthRule
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxRequiredRule,
        DxStringLengthRule
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid, {
    Column,
    RequiredRule,
    StringLengthRule
} from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Column dataField="Full_Name">
                    <RequiredRule />
                </Column>
                <Column dataField="Login">
                    <StringLengthRule
                        min={3}
                        message="Login should be at least 3 symbols long"
                    />
                </Column>
            </DataGrid>
        );
    }
}
export default App;

The onRowValidating handler allows you to perform an action before a notification that a validation rule has been broken is displayed. For instance, you can perform additional checks in this handler and change the validation result by changing the handler parameter's isValid field.

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        onRowValidating: function (e) {
            if (e.isValid && e.newData.Login === "Administrator") {
                e.isValid = false;
                e.errorText = "You cannot log in as Administrator";
            }
        }
    });
});

Angular

TypeScript

HTML

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    denyAdminLogin (e) {
        if (e.isValid && e.newData.Login === "Administrator") {
            e.isValid = false;
            e.errorText = "You cannot log in as Administrator";
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<dx-data-grid ...
    (onRowValidating)="denyAdminLogin($event)">
</dx-data-grid>

Vue

App.vue

<template>
    <DxDataGrid ...
        @row-validating="denyAdminLogin">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    },
    methods: {
        denyAdminLogin(e) {
            if(e.isValid && e.newData.Login === "Administrator") {
                e.isValid = false;
                e.errorText = "You cannot log in as Administrator";
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

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

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    denyAdminLogin(e) {
        if(e.isValid && e.newData.Login === "Administrator") {
            e.isValid = false;
            e.errorText = "You cannot log in as Administrator";
        }
    }

    render() {
        return (
            <DataGrid ...
                onRowValidating={this.denyAdminLogin}>
            </DataGrid>
        );
    }
}
export default App;

View Demo

Angular DataGrid - Editing

See Also

User Interaction

jQuery

Angular

Vue

React

Row Mode

jQuery

Angular

Vue

React

See Also

Cell Mode

jQuery

Angular

Vue

React

See Also

Batch Mode

See Also

Form Mode

jQuery

Angular

Vue

React

ASP.NET MVC Controls

See Also

Popup Mode

jQuery

Angular

Vue

React

See Also

API

Add

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

jQuery

Angular

Vue

React

Update

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

jQuery

Angular

Vue

React

Delete

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

jQuery

Angular

Vue

React

Get Current Cell Values

jQuery

Angular