Display Warning on Save in Kendo UI Grid

Environment

Product Version	2017.3 1026
Product	jQuery Grid for Kendo UI®

Description

I am using in-cell batch editing. We would like to display a warning message if the user changes the value of a cell.

Solution

You can use the Kendo UI Grid save event and the event data that it reveals and then open the cell for editing with the editCell() method:

• Using kendo.alert()

    save: function(e) {
        var cell = e.container;
        var grid = this;
        if (e.values.name !== "") {
            kendo.alert("You have manually changed name from " + e.model.name + " to " + e.values.name + ", this can cause serious problems!").bind("hide", function(){
              grid.editCell(cell);
            });
        } 
    }    

• Using the built-in alert

    save: function(e) {
        var cell = e.container;
        var grid = this;
        if (e.values.name !== "") {
            alert("You have manually changed name from " + e.model.name + " to " + e.values.name +  ", this can cause serious problems!");
          grid.editCell(cell);
        } 
    }

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
          columns: [
            { field: "name" },
            { field: "age" },
            { command: "destroy" }
          ],
          dataSource: {
            data:[
              { id: 1, name: "Jane Doe", age: 30},
              { id: 2, name: "John Doe", age: 33}
            ],
            schema: {
              model: { id: "id" }
            }
          },
          editable: true,
          save: function(e) {
            var cell = e.container;
            var grid = this;
            if (e.values.name !== "") {
              kendo.alert("You have manually changed name from " + e.model.name + " to " + e. values.name + ", this can cause serious problems!").bind("hide", function(){
                grid.editCell(cell)
              });
            } 
          }
        });
    </script>