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为要添加到dataSource的数据列表提供Id。老实说，我不确定如何在模式定义中完成分页。架构应该类似于：

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

随着更改，您从getModels返回的Promise并不是必需的，与您转换数据的方式相同。你可能想在read函数中尝试这样的东西：

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

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

1 个答案: