Question

I am using Ryan Niemeyer`s Knockout-Kendo.js library. I have a kendodropdown defined like this:

<input id="availableLanguagesDropdown" data-bind="kendoDropDownList: { data: Languages, value:Language }" onchange="onAvailableLanguageChangeHandler();" />

where Languages is observable array and Language is an observable. In my application items are removed from the Languages array ( which is the datasource for the kendodropdown). When the are no languages left in the array the kendodropdown shows the last available language.

I am assinging empty value on Language like this:

omega.Language("");

But still the last available language is visualized in the dropdown. I think I should refresh the kendodropdown. In the documentation for the kendoUI it is done like this:

var dropdownlist = $("dropdownlist").data("kendoDropDownList");
// re-render the items in drop-down list.
dropdownlist.refresh();

But as I am using the Knockout-Kendo.js library I am not sure how can I do this. Can someone please tell me how to refresh the dropdown when there are not items in it? And will this help me to show empty dropdown when there are no items in it? Thank You for your time!

Answer 1

The bindings will provide the widget to you in an observable, if you pass the widget argument. It looks like simply calling refresh() does not do the trick. I had to use the text method to see it to empty.

Something like:

<input id="availableLanguagesDropdown" data-bind="kendoDropDownList: { data: Languages, value:Language, widget: dropDown }" />

With JS:

var ViewModel = function() {
    this.Languages = ko.observableArray(["one", "two", "three"]);
    this.Language = ko.observable("two");

    this.dropDown = ko.observable();

    this.removeLanguages = function() {
        this.Languages([]);
        this.Language("");
        this.dropDown().text("");
    };
};

Sample here: http://jsfiddle.net/rniemeyer/GQqwY/

Seems like something that I should try to workaround in the library itself. I always hoped that getting access to the widget and calling its methods would be only for advanced or last resort use.