Kendo MVVM exception on dropdownlist: 'n.get is not a function'

Question

I get the error 'n.get is not a function' when I select an option from my Kendo dropdownlist that is bound to an MVVM observable.

The observable looks something like this (this is just a small portion of it):

var myObs = kendo.observable({ isBusy: false,

data: {
    LanguageGuid: '7e433f51-16e8-44e0-bf08-6843baa642bd',
    LanguageList: [
        { "Code":"English","Guid":"3aac23ff-36d3-405c-bf0c-531510a71c39" },  
        { "Code":"Afrikaans","Guid":"5bfe95f8-d8f8-4858-b214-9ffef84adfed" },  
        { "Code":"Zulu","Guid":"5a369509-1070-4f8a-9bdb-e4b4ca4e9590" }]
}

Here's the HTML:

<input type="text" value="7e433f51-16e8-44e0-bf08-6843baa642bd" name="LanguageGuid" id="LanguageGid" data-value-field="Guid" data-text-field="Code" data-role="dropdownlist" data-bind="source: data.LanguageList, value: data.LanguageGuid" class="valid">

The rest of the fields bind perfectly and MVVM does the job well, just not this list.

EDIT: I removed the value binding of the list which stops the exception from being raised:

<input type="text" value="7e433f51-16e8-44e0-bf08-6843baa642bd" name="LanguageGuid" id="LanguageGid" data-value-field="Guid" data-text-field="Code" data-role="dropdownlist" data-bind="source: data.LanguageList" class="valid"> 

This seems to suggest that something is wrong when binding the actual value of the dropdownlist. It works to set the original value, but it raises the exception when the selection is changed.

Answer 1

I discovered in the end that I hadn't converted the JSON object into an observable when returned from an ajax call AND before binding it to the view.

$.ajax({
    url: rootPath + "/profile/editprofile",
    type: "GET",
    data: "clientCode=xxx"
})
.done(function (result)
{
    $("#viewEditorContent").html(result.html);

    that.data = kendo.observable(result.clientViewModel);

    that.editForm = $("#viewEditorContent form");

    $.validator.unobtrusive.parse(that.editForm);

    kendo.bind($("#viewEditorContent"), that);
})  

in the done handler the result argument is a JSON object with 2 properties:

1. html and
2. clientViewModel

previously when I set that.data I did it without converting it to a kendo observable as in:

that.data = result.clientViewModel; 

Which is why it was throwing the exception when trying to access a function called 'get'.

Answer 2

In my case I was doing a local binding and feeding the viewModel without using the set method of kendo.observable

Something like this:

viewModel = kendo.observable({ 
    listValues: null,
    selectedValue: null,
});

<script>
    $(document).ready(function () {
        viewModel.listValues = [...]; // Wrong way initializing the viewModel
    });
</script>

In this way the dropDownList show the listValues correctly but when you select one then you get the error 'n.get is not a function'

---

Solution:

Fill viewModel.listValues using the set method of kendo.observable

<script>
    $(document).ready(function () {
        viewModel.set('listValues', [...]); // Correct way initializing the viewModel
    });
</script>