cellClose

Fired when "incell" edit mode is used and the cell is going to be closed. The event is triggerd after saving or canceling the changes, but before the cell is closed.

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.type String

The type of the cell close action - can be either "save" or "cancel". The "cancel" type is triggered when the grid keyboard navigation is enabled by "navigatable: true" and Esc key is used for cell close action.

e.sender kendo.ui.Grid

The widget instance which fired the event.

Example - subscribe to the "cellClose" 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: "incell",
  cellClose:  function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.type);
  }
});
var grid = $("#grid").data("kendoGrid");
grid.editCell($("#grid td:eq(1)"));
</script>

Example - subscribe to the "cellClose" event during initialization

<div id="grid"></div>
<script>
function grid_cellClose(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(e.type);
}

$("#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: "incell",
});

var grid = $("#grid").data("kendoGrid");
grid.bind("cellClose", grid_cellClose);

grid.editCell($("#grid td:eq(1)"));
</script>