In Grid documentation in section editable.template show how bind value to numeric text box :
<label>Age: <input data-role="numerictextbox" name="age" /></label>
I need bind value to dropdown list. I change code like this:
<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="dropdownlist" data-bind="value: age, source: dataSource" /></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" }
}
},
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
}
});
var dataSource = new kendo.data.DataSource({
data: [ 21,22,23,24 ]
});
</script>
But dataSource do not bound. Whats wrong?
<label>Age: <input data-role="numerictextbox" name="age" /></label>
I need bind value to dropdown list. I change code like this:
<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="dropdownlist" data-bind="value: age, source: dataSource" /></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" }
}
},
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
}
});
var dataSource = new kendo.data.DataSource({
data: [ 21,22,23,24 ]
});
</script>
But dataSource do not bound. Whats wrong?