CODEWITHSUNDEEP
jqueryknockout.jskendo-comboboxknockout-kendo
Austin Pantall
Austin Pantall

Reputation: 1

knockout-kendo combobox datasource not updating after it has been rendered?

I am working on an a web application using the knockout-kendo.js libraries. My issue is that after I have a a bound kendoComboBox to an observableArray datasource. The combobox does not reflect changes made to the observableArray.

Here is my bound combobox:

<input data-bind="kendoComboBox: { dataTextField: 'name', dataValueField: 'id', data:     choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" />

Here is my viewmodel:

var ViewModel = function() {
this.choices = ko.observableArray([
    { id: "1", name: "apple"},
    { id: "2", name: "orange"},
    { id: "3", name: "banana"}
]);

this.AddChoice = function () {
    choices().push(new { id: "4", name: "frank" });

}

this.selectedChoice = ko.observable();}; 
ko.applyBindings(new ViewModel());

Please see the following jsfiddle:

http://jsfiddle.net/austinpantall/chNW8/

Notice what happens when the button is clicked to add an item to the data source observableArray. The combobox does not display the new item as an option.

I am rather new to knockoutkendo and am looking for a workaround / alternate way to get new items to appear in the combobox.

Thanks in advance, Austin

Upvotes: 0

Views: 1064

Answers (1)

Neil Hibbert
Neil Hibbert

Reputation: 862

Not sure if this is still an issue for you but I stumbled across the question whilst looking at another problem for myself. This solution assumes the use of jQuery as well but I think it is what you are looking for:

HTML:

<div id="wrapper">
<input data-bind="kendoComboBox: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

<input type="button" data-bind="click: AddChoice" value="Add Choice" />
</div>

JS / Knockout / jQuery:

var ViewModel = function() {
    this.choices = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"}
    ]);

    this.AddChoice = function () {
        choices.push({ id: "4", name: "frank" });

    }

    this.selectedChoice = ko.observable();
};

ko.applyBindings($('#wrapper'), ViewModel());

I have tweaked your jsFiddle with a version that produces the result you were expecting:

http://jsfiddle.net/nTnwx/

Hope this helps...

Upvotes: 1

Related Questions