editable.template String |Function

The template which renders popup editor.

The template should contain elements whose name HTML attributes are set as the editable fields. This is how the grid will know which field to update. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.

Use the role data attribute to initialize Kendo UI widgets in the template. Check data attribute initialization for more info. The validation that is set in schema.model(/api/javascript/data/datasource/configuration/schema.model) is not mapped automatically. As a result, when you use the editable.template option, you have to add the validation for every element manually.

Example - customize the popup editor

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input name="name" /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" /></label>
  </p>
</script>
<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: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>

Example - using MVVM in the popup editor template

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input data-bind="value:name" /></label>
  </p>
  <p>
    <label>Age:<input data-role="numerictextbox" data-bind="value:age" /></label>
  </p>
</script>
<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: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>