Kendo UI 虚拟化多选更改事件未触发

Question

我刚刚将我的第一个 Kendo Multi-Select 控件配置为使用虚拟化，并且不会触发 change 事件。我确定这是我做错了，但我不知道是什么。 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 返回的 Promise 并不是真正必要的，与您转换数据的方式相同。你可能想在读取函数中尝试这样的事情：

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