drop down in grid template
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<div id="container">
<span data-bind="text:test"></span>
<button data-bind="click:clickPushUpdate">
PushUpdate
</button>
<button>
Set
</button>
<div id='grdLookupList'
data-role='grid'
data-bind='source:dsExpectedEvents'
data-columns='[{field:"Name",title:"Name",sortable:false},{field:"Important",title:"Important"}]'>
</div>
<span>-----------------</span>
<div id="example">
</div>
<script id="claimTypeSettings" type="text/x-kendo-template">
<div
data-role='grid'
data-bind='source:dsExpectedEvents2'
data-columns='[{field:"Name",title:"Name",sortable:false},{field:"Important",title:"Important",sortable:false}]'>
</div>
</script>
</div>
JavaScript
var vm = new kendo.observable({
test: "balls",
clickPushUpdate:function(e){
var dsExpectedEvents = vm.get("dsExpectedEvents");
debugger;
var event = dsExpectedEvents.at(0);
var dataItem = vm.get("dsExpectedEvents").get(event.ID);
if(dataItem){
event.Important = true;
vm.get("dsExpectedEvents").pushUpdate({event});
}
},
dsExpectedEvents: new kendo.data.DataSource({
data: [{ID: 1, Name:"Frank", Important:false}, {ID:2, Name: "Pants", Important:true}],
schema: {
model: {
id: "ID"
}
},
sort: { field: "SortOrder", dir: "asc" }
}),
dsExpectedEvents2: new kendo.data.DataSource({
data: [{ID: 1, Name:"Frank", Important:false}, {ID:2, Name: "Pants", Important:true}],
schema: {
model: {
id: "ID"
}
},
sort: { field: "SortOrder", dir: "asc" }
})
});
kendo.bind('#container', vm);
vm.get("dsExpectedEvents").read();
var template = kendo.template($("#claimTypeSettings"));
debugger;
var result = template([{ID: 1, Name:"Frank", Important:false}, {ID:2, Name: "Pants", Important:true}]);
$("#example").html(result);