New to Kendo UI for jQuery? Start a free 30-day trial

Edit

events

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.

edit

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.

<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>

<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>

<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>

<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>

<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>

Edit

edit

Event Data

e.container jQuery

e.model kendo.data.Model

e.sender kendo.ui.Grid

e.container `jQuery`

e.model `kendo.data.Model`

e.sender `kendo.ui.Grid`