Knockout-Kendo MultiSelect: Enter Key Clears Previously Selected Values

751 views Asked by At

I'm using the Knockout-Kendo MultiSelect control. If I select a value from the list, then type in the second value and click enter, the previously entered values are removed.

VIEW

<select data-bind="kendoMultiSelect: { data: choices, value: selectedChoice }"></select>
Selected: <strong data-bind="text: selectedChoice"> </strong>

VIEW MODEL

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

ko.applyBindings(new ViewModel());

There is a working example on the Knockout-Kendo Site. HERE

See the Fiddle below:

JSFiddle

1

There are 1 answers

0
Nathan Hall On

Thank's to a co-worker for finding this!

There's a compatibility issue with this version of Kendo (V.2015.1.429) and Knockout-Kendo.

Apparently this is a known issue: Here

QUICK FIX (Custom Binding):

ko.bindingHandlers.multiSelect = {
        init: function (element, valueAccessor, allBindings, data, context) {
        var options = ko.toJS(valueAccessor());

        options.change = function (e) {
            valueAccessor().value(e.sender.value());
        }

        $(element).kendoMultiSelect(options);
        var multiselect = $(element).data("kendoMultiSelect");    

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            multiselect.destroy();
        });
    }
};

Working Example JSFiddle