Kendo UI虛擬化MultiSelect更改事件不會觸發

Question

我剛剛配置了我的第一個Kendo Multi-Select控件以使用虛擬化，並且更改事件未觸發。我確信這是我做錯了，但我不知道是什麼。 dojo.telerik.com上的代碼（我在這裏發佈的一些代碼）密切地反映了我在應用程序中實際執行的操作。 getter不會從服務器獲取數據，但只有在客戶端上沒有緩存數據的情況下。我的數據返回回調確實在客戶端處理分頁。我確實在應用程序中的數據中有重複的值，儘管在不久的將來我可能會改變這些值，但我不認爲這是問題，因爲我已經嘗試過使用非重複值並且仍然失敗發起改變事件。任何想法我做錯了什麼？

<script> 
    angular.module("KendoDemos", [ "kendo.directives" ]) 
    .controller("MyCtrl", function($scope){ 
     $scope.selectOptions = { 
      autoClose: false, 

      virtual: { 
       itemHeight: 26, 
       valueMapper: function(options) { 
       console.error("valueMapper intentionally not implemented."); 
        options.success(null); 
       } 
      }, 

      height: 150, 

      dataSource: new kendo.data.DataSource({ 
       transport: { 
       read: function (options) { 
        getModels(options).then(function (data) { 
         //here we simulate the paging from the server 
         console.log(options); 
         var slicedData = data.slice(options.data.skip, options.data.skip + options.data.take); 
         //here we add an Id field, this doesn't seem to help anything though 
         //I also tried adding numeric Id's, didn't help 
         for (i = 0; i < slicedData.length; i++) { 
          slicedData[i].Id = slicedData[i].ModelNo; 
         } 
         var pagedData = { 
           total: data.length, 
           data: slicedData 
            } 
         options.success(pagedData); 
        }, function (response) { 
         options.error(data); 
        }); 
        } 
       }, 
      schema: { 
       data: "data", 
       total: "total" 
      }, 
      pageSize: 5, 
      serverPaging: true /* trickery, we do client side paging of the data above */    
      }), 

      dataTextField: "ModelNo", 
      dataValueField: "Id", 

      change: function(e) { 
      //this never fires. Neither does the Cascade event 
      console.log("change fired"); 
      alert("Change Event Fired"); 
      console.log($scope.selectedModels); 
      } 
     }; 

     var getModels = function(options) { 
      return new Promise(function(resolve,reject) { 
      resolve($scope.selectData); 
      }); 
     } 
      $scope.selectData = [ 
      {ModelNo: "100 HP"}, 
      {ModelNo: "105 HP"}, 
      {ModelNo: "110 HP"}, 
      {ModelNo: "115 HP"}, 
      {ModelNo: "120 HP"}, 
      {ModelNo: "125 HP"}, 
      {ModelNo: "150 HP"}, 
      {ModelNo: "175 HP"}, 
      {ModelNo: "200 HP"}, 
      {ModelNo: "225 HP"}, 
      {ModelNo: "250 HP"}, 
      {ModelNo: "275 HP"}, 
      {ModelNo: "300 HP"}, 
      {ModelNo: "325 HP"}, 
      {ModelNo: "350 HP"}, 
      {ModelNo: "375 HP"}, 
      {ModelNo: "400 HP"}, 
      {ModelNo: "500 HP"}, 
      {ModelNo: "550 HP"}, 
      {ModelNo: "600 HP"}, 
      {ModelNo: "100 HP"}, 
      {ModelNo: "105 HP"}, 
      {ModelNo: "110 HP"}, 
      {ModelNo: "115 HP"}, 
      {ModelNo: "120 HP"}, 
      {ModelNo: "125 HP"}, 
      {ModelNo: "150 HP"}, 
      {ModelNo: "175 HP"}, 
      {ModelNo: "200 HP"}, 
      {ModelNo: "225 HP"}, 
      {ModelNo: "250 HP"}, 
      {ModelNo: "275 HP"}, 
      {ModelNo: "300 HP"}, 
      {ModelNo: "325 HP"}, 
      {ModelNo: "350 HP"}, 
      {ModelNo: "375 HP"}, 
      {ModelNo: "400 HP"}, 
      {ModelNo: "500 HP"}, 
      {ModelNo: "550 HP"}, 
      {ModelNo: "600 HP"}, 
      {ModelNo: "100 HP"}, 
      {ModelNo: "105 HP"}, 
      {ModelNo: "110 HP"}, 
      {ModelNo: "115 HP"}, 
      {ModelNo: "120 HP"}, 
      {ModelNo: "125 HP"}, 
      {ModelNo: "150 HP"}, 
      {ModelNo: "175 HP"}, 
      {ModelNo: "200 HP"}, 
      {ModelNo: "225 HP"}, 
      {ModelNo: "250 HP"}, 
      {ModelNo: "275 HP"}, 
      {ModelNo: "300 HP"}, 
      {ModelNo: "325 HP"}, 
      {ModelNo: "350 HP"}, 
      {ModelNo: "375 HP"}, 
      {ModelNo: "400 HP"}, 
      {ModelNo: "500 HP"}, 
      {ModelNo: "550 HP"}, 
      {ModelNo: "600 HP"}   
      ] 
     //to hold our selected data 
     $scope.selectedModels = []; 
     }) 
</script> 

這裏的道場鏈接： http://dojo.telerik.com/@villagemedia/uHaFa/15

Answer 1

的模式看起來有點過。您應通過options.success爲正在添加到數據源的數據列表提供一個Id。老實說，我不知道你如何在模式定義中完成分頁。該模式應該是這個樣子：

schema: { 
    Id: "Id", 
    ModelNo: "ModelNo" 
} 

隨着這改變了，你是從getModels返回無極是不是真的有必要，同樣與您正在改變數據的方式。你可能想嘗試在閱讀功能是這樣的：

read: function (options) { 
    console.log(options); 
    var slicedData = $scope.selectData.map(function(obj){ 
     return {Id: obj.ModelNo, ModelNo: obj.ModelNo}; 
    }); 
    options.success(slicedData); 
} 

共有的數據源應該是這個樣子：

dataSource: new kendo.data.DataSource({ 
    transport: { 
     read: function (options) { 
      console.log(options); 
      var slicedData = $scope.selectData.map(function(obj){ 
      return {Id: obj.ModelNo, ModelNo: obj.ModelNo}; 
      }); 
      options.success(slicedData); 
     } 
    }, 
    schema: { 
     Id: "Id", 
     ModelNo: "ModelNo" 
    },   
}) 

我組建了一個工作示例的基礎上你的代碼在這裏http://dojo.telerik.com/ADeWE/2