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 inschema.model
(/api/javascript/data/datasource/configuration/schema.model) is not mapped automatically. As a result, when you use theeditable.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>