editing 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'
                }
            }
        });
    });
    

    addRow

    Specifies text for a hint that appears when a user hovers the mouse pointer over the "Add" button. Setting this option makes sense only when the allowAdding option is true.

    Type: String
    Default Value: 'Add a row'

    For information on data modification controls including the "Add" button, refer to the Data Modification Controls topic.

    cancelAllChanges

    Specifies text for a hint that appears when a user hovers the mouse pointer over the "Revert" button. Setting this option makes sense only when the mode option is set to batch.

    Type: String
    Default Value: 'Discard changes'

    For information on data modification controls accessible in the batch edit mode including the "Revert" button, refer to the Editing in the Batch Mode topic.

    cancelRowChanges

    Specifies text for a cancel button displayed when a row is in the editing state. Setting this option makes sense only when the allowUpdating option is set to true.

    Type: String
    Default Value: 'Cancel'

    A cancel button appears when a user is editing a grid record in the "row" edit mode. It is located in the rightmost grid column along with the save button.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | cancelRowChanges option is used to alter the text of the button that cancels changes, which were made in a grid row. To see the altered text, click one of the "Edit" buttons accompanying each grid row.

    <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,
                texts: {
                    cancelRowChanges: 'Undo'
                }
            }
        }"></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, the editing | texts | cancelRowChanges option is used to alter the text of the button that cancels changes, which were made in a grid row. To see the altered text, click one of the "Edit" buttons accompanying each grid row.

    <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,
            texts: {
                cancelRowChanges: 'Undo'
            }
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the editing | texts | cancelRowChanges option is used to alter the text of the button that cancels changes, which were made in a grid row. To see the altered text, click one of the "Edit" buttons accompanying each grid row.

    <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,
                texts: {
                    cancelRowChanges: 'Undo'
                }
            }
        });
    });
    

    confirmDeleteMessage

    Specifies a message to be displayed by a confirmation window. Setting this option makes sense only when the edit mode is "row".

    Type: String
    Default Value: 'Are you sure you want to delete this record?'

    A confirmation window appears when a user clicks a delete button, which accompanies each grid record if a user is enabled to remove records. This window also appears when the deleteRow(rowIndex) method is called. The confirmation window is entitled with text specified by the confirmDeleteTitle option and contains a message specified by the confirmDeleteMessage option. To prevent the confirmation window from appearing, assign an empty string to the latter option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | confirmDeleteMessage option is used to alter the text appearing in a confirmation window. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <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',
                allowDeleting: true,
                texts: {
                    confirmDeleteMessage: 'Do you really want to delete this record?'
                }
            }
        }"></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, the editing | texts | confirmDeleteMessage option is used to alter the text appearing in a confirmation window. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        editing: {
            mode: 'row',
            allowDeleting: true,
            texts: {
                confirmDeleteMessage: 'Do you really want to delete this record?'
            }
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the editing | texts | confirmDeleteMessage option is used to alter the text appearing in a confirmation window. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <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',
                allowDeleting: true,
                texts: {
                    confirmDeleteMessage: 'Do you really want to delete this record?'
                }
            }
        });
    });
    

    confirmDeleteTitle

    Specifies text to be displayed in the title of a confirmation window. Setting this option makes sense only when the edit mode is "row".

    Type: String
    Default Value: ''

    A confirmation window appears when a user clicks a delete button, which accompanies each grid record if a user is enabled to remove records. This window also appears when the deleteRow(rowIndex) method is called. The confirmation window is entitled with text specified by the confirmDeleteTitle option and contains a message specified by the confirmDeleteMessage option. To prevent the confirmation window from appearing, assign an empty string to the latter option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | confirmDeleteTitle option is used to alter the text appearing in the title of a confirmation window. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <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',
                allowDeleting: true,
                texts: {
                    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, the editing | texts | confirmDeleteTitle option is used to alter the text appearing in the title of a confirmation window. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

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

    In this example, the editing | texts | confirmDeleteTitle option is used to alter the text appearing in the title of a confirmation window. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <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',
                allowDeleting: true,
                texts: {
                    confirmDeleteTitle: 'Confirm Row Deletion'
                }
            }
        });
    });
    

    deleteRow

    Specifies text for a button that deletes a row from a grid. Setting this option makes sense only when the allowDeleting option is set to true.

    Type: String
    Default Value: 'Delete'

    Each grid record is accompanied with a button that deletes this record. This button is located in the rightmost grid column. You can change text displayed by this button using the deleteRow option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | deleteRow option is used to alter the text of the button that deletes a row from the grid.

    <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: {
                allowDeleting: true,
                texts: {
                    deleteRow: 'Remove'
                }
            }
        }"></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, the editing | texts | deleteRow option is used to alter the text of the button that deletes a row from the grid.

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

    In this example, the editing | texts | deleteRow option is used to alter the text of the button that deletes a row from the grid.

    <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: {
                allowDeleting: true,
                texts: {
                    deleteRow: 'Remove'
                }
            }
        });
    });
    

    editRow

    Specifies text for a button that turns a row into the editing state. Setting this option makes sense only when the allowUpdating option is set to true.

    Type: String
    Default Value: 'Edit'

    An edit button accompanies each grid record if the edit mode is 'row'. This button is located in the rightmost grid column. You can specify text for this button using the editRow option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | editRow option is used to alter the text of the button that edits a grid row.

    <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,
                texts: {
                    editRow: 'Change'
                }
            }
        }"></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, the editing | texts | editRow option is used to alter the text of the button that edits a grid row.

    <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,
            texts: {
                editRow: 'Change'
            }
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the editing | texts | editRow option is used to alter the text of the button that edits a grid row.

    <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,
                texts: {
                    editRow: 'Change'
                }
            }
        });
    });
    

    saveAllChanges

    Specifies text for a hint that appears when a user hovers the mouse pointer over the "Save" button. Setting this option makes sense only when the mode option is set to batch.

    Type: String
    Default Value: 'Save changes'

    For information on data modification controls accessible in the batch edit mode including the "Save" button, refer to the Editing in the Batch Mode topic.

    saveRowChanges

    Specifies text for a save button displayed when a row is in the editing state. Setting this option makes sense only when the allowUpdating option is set to true.

    Type: String
    Default Value: 'Save'

    A save button appears when a user is editing a grid record in the "row" edit mode. It is located in the rightmost grid column along with the cancel button.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | saveRowChanges option is used to alter the text of the button that saves changes, which were made in a grid row. To see the altered text, click one of the "Edit" buttons accompanying each grid row.

    <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,
                texts: {
                    saveRowChanges: 'OK'
                }
            }
        }"></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, the editing | texts | saveRowChanges option is used to alter the text of the button that saves changes, which were made in a grid row. To see the altered text, click one of the "Edit" buttons accompanying each grid row.

    <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,
            texts: {
                saveRowChanges: 'OK'
            }
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the editing | texts | saveRowChanges option is used to alter the text of the button that saves changes, which were made in a grid row. To see the altered text, click one of the "Edit" buttons accompanying each grid row.

    <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,
                texts: {
                    saveRowChanges: 'OK'
                }
            }
        });
    });
    

    undeleteRow

    Specifies text for a button that recovers a deleted row. Setting this option makes sense only if the grid uses the batch edit mode and the allowDeleting option is set to true.

    Type: String
    Default Value: 'Undelete'

    In the batch mode, deleted rows can be restored by a click on the undelete button. You can specify text for this button using the undeleteRow option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the editing | texts | undeleteRow option is used to alter the text of the button that restores a removed row in the batch edit mode. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <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: 'batch',
                allowDeleting: true,
                texts: {
                    undeleteRow: 'Restore'
                }
            }
        }"></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, the editing | texts | undeleteRow option is used to alter the text of the button that restores a removed row in the batch edit mode. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

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

    In this example, the editing | texts | undeleteRow option is used to alter the text of the button that restores a removed row in the batch edit mode. To see the altered text, click one of the "Delete" buttons accompanying each grid row.

    <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: 'batch',
                allowDeleting: true,
                texts: {
                    undeleteRow: 'Restore'
                }
            }
        });
    });
    

    validationCancelChanges

    Specifies text for a hint that appears when a user hovers the mouse pointer over the "Cancel changes" button. Setting this option makes sense only when the mode option is set to cell and the validation capabilities are enabled.

    See Also
    Type: String
    Default Value: 'Cancel changes'