如何使Kendo MultiSelect依赖于剑道网格表中的另一个剑道下拉列表

Question

我已经看过关于Cascading MultiSelects的kendo示例，但这不在如下所示的kendo网格中 http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/cascade/cascading-multiselects ..如果我们的剑道网格有两列，如columnA（剑道下拉类型）和coulmnB（剑道多选类型），怎么样？现在，columnA中row1的更改正在影响row1 multiSelect columnB的数据源。 columnA中row2的更改正在影响row2 multiSelect columnB的数据源。

我能做的就是我已经在剑道网格的数据源中声明了这个模型

model: {
        id: "id",
        fields: 
         {
            courseName: { defaultValue: {}  ,editable: true, validation: { required: true,required: { message: "Please Select a course" }} },// this will be kendoDropDownList

            students:  { type: "string",editable: true  }// this is will be kendoMultiSelect
                }
        }// end model

我在下面的网格中

 var grid=   $("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    columnMenu:true,
                    filterable:true,
                    height: 550,
                    reorderable: true,
                      columnReorder: function(e) {
                        console.log(e.column.field, e.newIndex, e.oldIndex);                                                              
                      },
                    toolbar: ["excel", { template: kendo.template($("#template").html()) } , { template: kendo.template($("#clearFilterTemplate").html()) },{template: kendo.template($("#searchTemplate").html())} ],
                    excel: {
                            fileName: "Export Table.xlsx",
                            proxyURL: "excelExport",
                            filterable: true,
                            allPages: true
                        },                        
                     editable: true,//   editable: "inline" editable: true,
                     resizable: true,
                     columns: [
                                 { field: "checkbox", title: "Box", width: 50,  template: "<input type='checkbox' name='checkbox' class='checkbox' />"  },  

                                  {
                                          field: "courseName",editor: courseEditor,title:"Course", width: 200

                                },
                                {
                                          field: "students",editor: studentsEditor,title:"Students", width: 200

                                }

                               // { command: ["edit"], title: "&nbsp;", width: "100px" }

                            ]


                });

 function courseEditor(container, options)
 {
  var selectedRowModel = options.model;


                                    var input = $('<input id="courseName" name="courseName">'); 

                                    // append to the editor container
                                    input.appendTo(container);

                                    // initialize a dropdownlist
                                    input.kendoDropDownList({
                                        dataTextField: "text",
                                        dataValueField: "value", 

                                       change: function (e) { },

                                        dataSource: {
                                        dataType: "json",                                 
                                        transport: {
                                            read: "getCourses"

                                                  }// end transport
                                           }// datasource
                                    }).appendTo(container);                                 

 }

 function studentsEditor(container, options)
 {

  $("<select multiple='multiple' data-bind='value :students'/>")
      .appendTo(container)
      .kendoMultiSelect({
      valuePrimitive: true,
      dataSource: studentInitialDataSource,
      dataTextField: "text",
      dataValueField: "value",
      //cascadeFrom: "courseName", // cascade from courseName dropdownlist
       change: function (e) { },
      open: function(e) {
            //var item = e.item;
            //var text = item.text();
            // Use the selected item or its text

             var selectedRowModel = options.model;
             var courseName= selectedRowModel.courseName;
             if( courseName== null )
             {
                alert("yes it is null the courseName");

             }
             else
             {
                alert("no it is not null see courseName:"+courseName);

                var newDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "getStudents?courseName="+courseName,
                            dataType: "json"
                            /*data: {
                                q: function() {
                                    return $("#searchFor").val();
                                              }
                                    }*/
                        }
                    }
                });

                this.setDataSource(newDataSource );  
                //shecdulCycleDataSource = secondDataSource   ;

             }

          }
    });


 }

如果你看到上面我已经使用过this.setDataSource（newDataSource）;在打开时更改kendoMultipleSelect的数据源，但是当课程值更改学生列表时我需要的也会自动更改

如何做到这一点，任何一个例子，将不胜感激