Question

我最近开始学习KendoUI，并提出了这个问题。我试图使用MVVM方法在kendo网格中包含一个下拉列表。网格有3列 - 复选框，文本和下拉列表。我想根据是否选中复选框手动设置下拉列表值。作为一个例子，我试图将类设置为＆＃39; Class 3＆＃39;如果未选中复选框。即使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>

在从模型设置下拉项之前调用Kendo下拉列表数据绑定

0 个答案: