Kendo UI Virtualized MultiSelect Change Event Not Firing

Question

I've just configured my first Kendo Multi-Select control to use virtualization and the change event doesn't fire. I'm sure it's something I'm doing wrong, but I don't know what. The code at dojo.telerik.com (some of which I'm posting here) closely mirrors what I'm actually doing in my application. The getter does fetch data from the server, but only if it isn't cached on the client. And my data return callback does handle paging on the client side. And I do actually have duplicate values in my data in the application though I'll likely be changing that in the near future but I don't think that's the issue here as I've tried it with non-duplicate values and it still fails to fire a change event. Any idea what I'm doing wrong?

    <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>

Here's the dojo link: http://dojo.telerik.com/@villagemedia/uHaFa/15

Answer 1

The schema looks a little off. You should provide an Id for the list of data that is being added to the dataSource via options.success. Honestly I am not sure how you might accomplish paging in the schema definition. The schema should look something like:

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

With that changed, the Promise you are returning from getModels is not really necessary, same with the way you are transforming the data. You might want to try something like this in the read function:

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

Altogether the dataSource should look something like this:

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"
    },        
})

I put together a working example base on your code here http://dojo.telerik.com/ADeWE/2