editable Boolean|Object|String (default: false)
If set to true the user would be able to edit the data to which the grid is bound. By default editing is disabled.
Can be set to a string ("inline", "incell" or "popup") to specify the editing mode. The default editing mode is "incell".
Can be set to a JavaScript object which represents the editing configuration.
The "inline" and "popup" editing modes are triggered by the "edit" column command. Thus it is required to have a column with an "edit" command. The "incell" editing mode combined with DataSource
autoSync: truesetting is not supported when using server-side grouping in the Grid. To be able to save edited values on each change, you can disable server-side grouping or trigger a DataSourcesync()manually inside the cellClose event.
Example - enable editing
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["save"],
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",
fields: {
age: { type: "number"}
}
}
}
},
editable: true
});
</script>
Example - enable popup editing
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ 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: {
age: { type: "number"}
}
}
}
},
editable: "popup"
});
</script>
Check Batch editing, Inline editing and Popup editing for live demos.