edit

Fired when the user edits or creates a data item.

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 of the edit container element, which wraps the editing UI. Depending on the Grid edit mode, the container is different:

• "incell" edit mode - the container element is a table cell
• "inline" edit mode - the container is a table row
• "popup" edit mode - the container is a Kendo UI Window element, which provides an easy way to obtain a reference to the Window widget object, e.g. to attach additional events.

e.model kendo.data.Model

The data item which is going to be edited. Use its isNew method to check if the data item is new (created) or not (edited).

e.sender kendo.ui.Grid

The widget instance which fired the event.

Example - subscribe to the "edit" event during initialization

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          "id": { type: "number" }
        }
      }
    }
  },
  editable: "popup",
  toolbar:["create"],
  edit: function(e) {
    if (!e.model.isNew()) {
      // Disable the editor of the "id" column when editing data items
      var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
      numeric.enable(false);
    }
  }
});
</script>

Example - subscribe to the "edit" event after initialization

<div id="grid"></div>
<script>
function grid_edit(e) {
  if (!e.model.isNew()) {
    // Disable the editor of the "id" column when editing data items
    var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
    numeric.enable(false);
  }
}
$("#grid").kendoGrid({
  columns: [
    { field: "id" },
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          "id": { type: "number" }
        }
      }
    }
  },
  editable: "popup",
  toolbar:["create"]
});
var grid = $("#grid").data("kendoGrid");
grid.bind("edit", grid_edit);
</script>

Example - container element when the edit mode is set to "incell"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            "id": { type: "number" }
          }
        }
      }
    },
    editable: "incell",
    toolbar:["create"],
    edit: function(e) {
      var container = e.container;
      container.css("background-color", "#90EE90");
    }
  });
</script>

Example - container element when the edit mode is set to "inline"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" },
      { command: "edit" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            "id": { type: "number" }
          }
        }
      }
    },
    editable: "inline",
    toolbar:["create"],
    edit: function(e) {
      var container = e.container;
      container.css("background-color", "#90EE90");
    }
  });
</script>

Example - container element when the edit mode is set to "popup"

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" },
      { command: "edit" }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30 },
        { id: 2, name: "John Doe", age: 33 }
      ],
      schema: {
        model: {
          id: "id",
          fields: {
            "id": { type: "number" }
          }
        }
      }
    },
    editable: "popup",
    toolbar:["create"],
    edit: function(e) {
      var container = e.container;
      container.css("background-color", "#90EE90");
    }
  });
</script>