Kendo UI Virtualized MultiSelect Change Event Not Firing

Question

Я только что настроил свой первый элемент управления Kendo Multi-Select, чтобы использовать виртуализацию, и событие изменения не срабатывает. Я уверен, что это то, что я делаю неправильно, но я не знаю, что. Код на dojo.telerik.com (некоторые из которых я публикую здесь) точно отражает то, что я на самом деле делаю в своем приложении. Получатель извлекает данные с сервера, но только если он не кэшируется на клиенте. И обратный вызов возвращаемых данных обрабатывает пейджинг на стороне клиента. И у меня действительно есть повторяющиеся значения в моих данных в приложении, хотя я, скорее всего, изменю это в ближайшем будущем, но я не думаю, что это проблема здесь, поскольку я пробовал ее с не дублирующимися значениями, и она все еще терпит неудачу для запуска события изменения. Любая идея, что я делаю неправильно?

<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. Честно говоря, я не уверен, как вы можете выполнить подкачку в определении схемы. Схема должна выглядеть примерно так:

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

С, что изменилось, Promise вы возвращаетесь из 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 должен выглядеть примерно так:

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