cancel

Fired when the user clicks the "cancel" button (in inline or popup editing mode) or closes the popup window.

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

Event Data

e.container jQuery

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

e.model kendo.data.Model

The data item to which the table row is bound.

e.preventDefault Function

If invoked prevents the cancel action. The table row remains in edit mode.

e.sender kendo.ui.Grid

The widget instance which fired the event.

Example - subscribe to the "cancel" 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: "popup",
  cancel: function(e) {
    e.preventDefault()
  }
});
var grid = $("#grid").data("kendoGrid");
grid.editRow($("#grid tr:eq(1)"));
</script>

Example - subscribe to the "cancel" event after initialization

<div id="grid"></div>
<script>
function grid_cancel(e) {
  e.preventDefault()
}
$("#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: "popup"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("cancel", grid_cancel);
grid.editRow($("#grid tr:eq(1)"));
</script>
In this article