save

Fired when a data item is saved.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.model kendo.data.Model

The data item to which the table row is bound. If e.model.id is null, then a newly created row is being saved.

e.container jQuery

The jQuery object representing the current edit container element. More information is available in the edit event arguments' description.

e.sender kendo.ui.Grid

The widget instance which fired the event.

e.values Object

The values entered by the user. Available only when the editable.mode option is set to "incell".

e.preventDefault Function

If invoked, prevents the save action. In "incell" editable.mode the edited table cell will exit edit mode. In "inline" and "popup" edit modes, the edit form will remain open.

Example - subscribe to the "save" event during initialization

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  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) {
    if (e.values.name !== "") {
      // the user changed the name field
      if (e.values.name !== e.model.name) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("name is modified");
      }
    } else {
        e.preventDefault();
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("name cannot be empty");
    }
  }
});
</script>

Example - subscribe to the "save" event after initialization

<div id="grid"></div>
<script>
function grid_save(e) {
    if (e.values.name !== "") {
      // the user changed the name field
      if (e.values.name !== e.model.name) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("name is modified");
      }
    } else {
        e.preventDefault();
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("name cannot be empty");
    }
}
$("#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
});
var grid = $("#grid").data("kendoGrid");
grid.bind("save", grid_save);
</script>