Edit this page

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" },
    { 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) {
    if (e.values.name !== "") {
      // the user changed the name field
      if (e.values.name !== e.model.name) {
        console.log("name is modified");
      }
    } else {
        e.preventDefault();
        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) {
        console.log("name is modified");
      }
    } else {
        e.preventDefault();
        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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy