Updating knockout observable array fails to update kendo multi select control

Question

HTML

<select id ="multiSelect" data-bind="options: choices, selectedOptions:   selectedChoice">
</select>
Selected: <strong data-bind="text: selectedChoice"> </strong>

Javascript

var ViewModel = function() {
   this.choices = ko.observableArray(["apple", "orange", "banana"]);
   this.selectedChoice = ko.observableArray();
};

var vm = new ViewModel()
ko.applyBindings(vm);
vm.choices.push("watermelon");
$("#multiSelect").kendoMultiSelect().data("kendoMultiSelect");
vm.choices.push("strawberry");

I'm somewhat new to knockout binding. Can anyone explain to me why strawberry does not show up in the multiselect drop down box?

Here's the jsfiddle:

http://jsfiddle.net/he0xx93s/3/

score 1 · Accepted Answer · edited May 23 '17 at 12:08

Kendo's MultiSelect does not listen for changes made by the knockout observable objects.

What you can use as a work-around is to explicitly update the dataSource of the kendo MultiSelect every time the array changes.

Here is how to subscribe to a change.

So the main idea should be something like this:

vm.choices.subscribe(function(changes) {

    var ms = $("#multiSelect").data("kendoMultiSelect");

    changes.forEach(function(change) {
        if (change.status === 'added') {

            ms.dataSource.push(change.value);
        }
    });

}, null, "arrayChange");

In a similar way you can remove/update items with the remove method of the dataSource.

Or in case of update you can get the specific item (e.g. third item) and use the set method of the kendo observable.

dataSource.data()[3].set('someProperty', newValue);

Updating knockout observable array fails to update kendo multi select control

1 Answers1