Configuration editing

    Contains options that specify how grid content can be changed.

    Type: Object

    dxDataGrid supports editing, insertion and the removing of grid values. The availability of performing a certain operation is specified by the allowUpdating, allowAdding and allowDeleting options.

    Editing in dxDataGrid can be performed in four different modes. For a comprehensive overview of them, see the Row Mode, Batch Mode, Cell Mode and Form Mode articles.

    See Also
    • For more information about editing settings you can configure, including both edit modes, refer to the Editing in UI topic.
    • To discover how to manage the editing process from code, see the Editing in Code topic.

    NOTE: Before allowing a user to edit, insert and remove, make sure your data source supports all these actions.

    View Demo

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can perform all kinds of data modifications available in the dxDataGrid widget: row editing, insertion and removal. These operations are conducted in the batch edit mode. All these settings are specified using the fields of the editing configuration object.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 7 },
            editing: {
                mode: 'batch',
                allowUpdating: true,
                allowAdding: true,
                allowDeleting: true
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can perform all kinds of data modifications available in the dxDataGrid widget: row editing, insertion and removal. These operations are conducted in the batch edit mode. All these settings are specified using the fields of the editing configuration object.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 7 },
        editing: {
            mode: 'batch',
            allowUpdating: true,
            allowAdding: true,
            allowDeleting: true
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can perform all kinds of data modifications available in the dxDataGrid widget: row editing, insertion and removal. These operations are conducted in the batch edit mode. All these settings are specified using the fields of the editing configuration object.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 7 },
            editing: {
                mode: 'batch',
                allowUpdating: true,
                allowAdding: true,
                allowDeleting: true
            }
        });
    });
    
    

    allowAdding

    Specifies whether or not new grid records can be added at runtime.

    Type: Boolean
    Default Value: false

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the value of the allowAdding option at runtime using the check box below. If this option is true, the grid is supplied with a button that inserts a new record into the grid. Otherwise, this button is hidden, and you cannot insert records into the grid.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            editing: {
                allowDeleting: true
            },
            bindingOptions: {
                'editing.allowAdding': 'checkBoxState'
            }
        }"></div>
        <div dx-check-box="{
            text: 'Enable Row Insertion',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the value of the allowAdding option at runtime using the check box below. If this option is true, the grid is supplied with a button that inserts a new record into the grid. Otherwise, this button is hidden, and you cannot insert records into the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: {
            allowAdding: checkBoxState,
            allowDeleting: true
        }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Enable Row Insertion',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the value of the allowAdding option at runtime using the check box below. If this option is true, the grid is supplied with a button that inserts a new record into the grid. Otherwise, this button is hidden, and you cannot insert records into the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="enableInsertionCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            editing: {
                allowAdding: true,
                allowDeleting: true
            }
        });
    
        $("#enableInsertionCheckbox").dxCheckBox({
            text: 'Enable Row Insertion',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("editing.allowAdding", e.value);
            }
        });
    });
    

    allowDeleting

    Specifies whether or not grid records can be deleted at runtime.

    Type: Boolean
    Default Value: false

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the value of the allowDeleting option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Delete" buttons enabling you to delete grid records. Otherwise, this column is hidden, and the grid records cannot be deleted.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            editing: { allowDeleting: true },
            bindingOptions: {
                'editing.allowDeleting': 'checkBoxState'
            }
        }"></div>
        <div dx-check-box="{
            text: 'Enable Row Removal',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the value of the allowDeleting option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Delete" buttons enabling you to delete grid records. Otherwise, this column is hidden, and the grid records cannot be deleted.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: { allowDeleting: checkBoxState }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Enable Row Removal',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the value of the allowDeleting option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Delete" buttons enabling you to delete grid records. Otherwise, this column is hidden, and the grid records cannot be deleted.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="enableRemovalCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            editing: { allowDeleting: true }
        });
    
        $("#enableRemovalCheckbox").dxCheckBox({
            text: 'Enable Row Removal',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("editing.allowDeleting", e.value);
            }
        });
    });
    

    allowUpdating

    Specifies whether or not grid records can be edited at runtime.

    Type: Boolean
    Default Value: false

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the value of the allowUpdating option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Edit" buttons enabling you to edit grid records. Otherwise, this column is hidden, and the grid records cannot be edited.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            editing: { allowUpdating: true },
            bindingOptions: {
                'editing.allowUpdating': 'checkBoxState'
            }
        }"></div>
        <div dx-check-box="{
            text: 'Enable Row Editing',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the value of the allowUpdating option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Edit" buttons enabling you to edit grid records. Otherwise, this column is hidden, and the grid records cannot be edited.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: { allowUpdating: checkBoxState }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Enable Row Editing',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the value of the allowUpdating option at runtime using the check box below. If this option is true, the grid is supplied with an additional column that contains "Edit" buttons enabling you to edit grid records. Otherwise, this column is hidden, and the grid records cannot be edited.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="enableEditingCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            editing: { allowUpdating: true }
        });
    
        $("#enableEditingCheckbox").dxCheckBox({
            text: 'Enable Row Editing',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("editing.allowUpdating", e.value);
            }
        });
    });
    

    editEnabled

    Deprecated

    Use the allowUpdating option instead.

    editMode

    Deprecated

    Use the mode option instead.

    form

    The form configuration object. Used only when the editing mode is "form".

    Use the dataField option to link a form item with the corresponding grid column.

    NOTE: The template and editorType dxForm options are not available to change through this option. Handle the editorPreparing or editorPrepared event to customize the form editors.

    insertEnabled

    Deprecated

    Use the allowAdding option instead.

    mode

    Specifies how grid values can be edited manually.

    Type: String
    Default Value: 'row'
    Accepted Values: 'row' | 'batch' | 'cell' | 'form'

    Editing grid values requires the allowUpdating option to be set to true.

    For a comprehensive overview of available edit modes, refer to the Row Mode, Batch Mode, Cell Mode and Form Mode articles.

    View Demo

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can try all edit modes presented in the dxDataGrid widget. To change the current edit mode, choose the required item from the drop-down menu under the grid.

    <div ng-controller="demoController" style="text-align:center; height:500px; max-width:800px; margin: 0 auto">
        <div style="height:500px; width:800px">
            <div style="max-height:450px" dx-data-grid="{
                dataSource: books,
                columns: [
                    'author',
                    { dataField: 'title', width: 210 },
                    'year', 'genre', 'format'
                ],
                paging: { pageSize: 7 },
                editing: {
                    allowUpdating: true,
                    allowAdding: true,
                    allowDeleting: true
                },
                bindingOptions: {
                    'editing.mode': 'selectBoxValue'
                }
            }"></div>
            <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
                <div style="display:table-cell;vertical-align:middle">Choose an edit mode:&nbsp;</div>
                <div style="display:table-cell;width:150px" dx-select-box="{
                    dataSource: selectBoxOptions,
                    valueExpr: 'value',
                    displayExpr: 'name',
                    bindingOptions: {
                        value: 'selectBoxValue'
                    }
                }"></div>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.selectBoxValue = 'row';
        $scope.selectBoxOptions = [
            { name: 'Row', value: 'row' },
            { name: 'Batch', value: 'batch' },
            { name: 'Cell', value: 'cell' },
            { name: 'Form', value: 'form' }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can try all edit modes presented in the dxDataGrid widget. To change the current edit mode, choose the required item from the drop-down menu under the grid.

    <div style="text-align:center;height:500px; width:800px; margin: 0 auto">
        <div style="max-height:450px" data-bind="dxDataGrid: {
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 7 },
            editing: {
                mode: selectBoxValue,
                allowUpdating: true,
                allowAdding: true,
                allowDeleting: true
            }
        }"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Choose an edit mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" data-bind="dxSelectBox: {
                dataSource: selectBoxOptions,
                valueExpr: 'value',
                displayExpr: 'name',
                value: selectBoxValue
            }"></div>
        </div>
    </div>
    
    var myViewModel = {
        books: books,
        selectBoxValue: ko.observable('row'),
        selectBoxOptions: [
            { name: 'Row', value: 'row' },
            { name: 'Batch', value: 'batch' },
            { name: 'Cell', value: 'cell' },
            { name: 'Form', value: 'form' }
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can try all edit modes presented in the dxDataGrid widget. To change the current edit mode, choose the required item from the drop-down menu under the grid.

    <div style="text-align:center;height:500px; width:800px; margin: 0 auto">
        <div id="gridContainer" style="max-height:450px"></div>
        <div style="height:70px;width:320px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
            <div style="display:table-cell;vertical-align:middle">Choose an edit mode:&nbsp;</div>
            <div style="display:table-cell;width:150px" id="selectBoxContainer"></div>
        </div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 7 },
            editing: {
                mode: 'row',
                allowUpdating: true,
                allowAdding: true,
                allowDeleting: true
            }
        });
    
        $('#selectBoxContainer').dxSelectBox({
            dataSource: [{ name: 'Row', value: 'row' },
                         { name: 'Batch', value: 'batch' },
                         { name: 'Cell', value: 'cell' },
                         { name: 'Form', value: 'form' }],
            valueExpr: 'value',
            displayExpr: 'name',
            value: 'row',
            onValueChanged: function (e) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option('editing.mode', e.value);
            }
        });
    });
    

    removeEnabled

    Deprecated

    Use the allowDeleting option instead.

    texts

    Contains options that specify texts for editing-related grid controls.

    Type: Object

    For detailed information on editing-related grid controls, see the Data Modification Controls topic.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, several options of the editing | texts configuration object are changed.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            editing: {
                mode: 'row',
                allowUpdating: true,
                allowDeleting: true,
                texts: {
                    deleteRow: 'Remove',
                    saveRowChanges: 'OK',
                    confirmDeleteTitle: 'Confirm Row Deletion'
                }
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, several options of the editing | texts configuration object are changed.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: {
            mode: 'row',
            allowUpdating: true,
            allowDeleting: true,
            texts: {
                deleteRow: 'Remove',
                saveRowChanges: 'OK',
                confirmDeleteTitle: 'Confirm Row Deletion'
            }
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, several options of the editing | texts configuration object are changed.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            editing: {
                mode: 'row',
                allowUpdating: true,
                allowDeleting: true,
                texts: {
                    deleteRow: 'Remove',
                    saveRowChanges: 'OK',
                    confirmDeleteTitle: 'Confirm Row Deletion'
                }
            }
        });
    });