Edit this page

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: true setting 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 DataSource sync() 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.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy