我最近开始学习KendoUI,并提出了这个问题。我试图使用MVVM方法在kendo网格中包含一个下拉列表。网格有3列 - 复选框,文本和下拉列表。我想根据是否选中复选框手动设置下拉列表值。作为一个例子,我试图将类设置为' Class 3'如果未选中复选框。即使index设置为2,它也会从事件dataBound末尾的模型中恢复为类。谁能帮我这个?我需要强制设置下拉列表索引。谢谢。
<script type="text/x-kendo-template" id="checkboxGrid">
<input type="checkbox" data-bind="checked: IsChecked" />
</script>
<script type="text/x-kendo-template" id="ddlGrid">
<input data-role="dropdownlist"
data-auto-bind="true"
data-text-field="name"
data-value-field="id"
data-auto-bind="true"
data-bind="source: actionSource, value: class, events:{dataBound: dataBound }"/>
</script>
<div id="content" >
<div id="my-grid"
data-role="grid"
data-sortable="true"
data-selectable="true"
data-columns='[
{"field": "IsChecked", "title":" ", template: kendo.template($("#checkboxGrid").html())},
{"field": "Name", "title":"Name" },
{"field": "class", "title":"Class", template: kendo.template($("#ddlGrid").html())}
]'
data-bind="source: dataSource">
</div>
</div>
<script>
$(document).ready(function() {
var viewModel = new kendo.data.ObservableObject({
dataSource: [
{ IsChecked: true, Name: "Student 1", class: { name: "Class 1", id:"1" }},
{ IsChecked: false, Name: "Student 2", class: { name: "-Please Select-", id:"999" } },
{ IsChecked: false, Name: "Student 3", class: { name: "-Please Select-", id:"999" }},
{ IsChecked: true, Name: "Student 4", class: { name: "Class 3", id:"3" } }
],
actionSource: [
{ name: "-Please Select-", id:"999"},
{ name: "Class 1", id:"1" },
{ name: "Class 2", id:"2" },
{ name: "Class 3", id:"3" }
],
dataBound: function(e) {
var ddl = e.sender;
var gridRow = $(ddl.element).closest( "tr" );
var checkbox = $(gridRow).find('input[type=checkbox]');
debugger;
if(checkbox.prop("checked") == false){
console.log("Checkbox checked : " + false);
//explicitly trying to set class to 'Class 3'
ddl.select(2);
debugger;
}
//Even though index is set to 2, it gets reverted back to the class from the model at the end of the event
}
});
kendo.bind($('#my-grid'), viewModel);
});
</script>