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

2
votes

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.

2
kendo-uikendo-mvvm
What version of kendo are you using ? I pasted your code into a jsbin, and it works perfectly (had to change the data.LanguageGuid to one in the list). jsbin.com/codun/1/edit - Robin Giltner
Hi @RobinGiltner, I found the problem. It was because I wasn't converting the JSON object to an observable. See my answer for some more details. Thanks for the input BTW. - Jacques

2 Answers

2
votes

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'.

1
votes

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>