Initial DropDownList selected item returns undefined?

[Vincent]

Good Evening,

I have an application in which I am using the DropDownList in combination w/ MVVM. The only issue that I am running into is that when the page first loads it will show the selected item, however it does not get that selected items value. For instance, on page load the Selected Item in the Dropdown is "Oranges" but the value stays unset until another item is chosen, then you are able to go back to the previous selected item and see the "Oranges" bound to its proper value.

I would think that it would since the model and view and bound together.

 

1.<input data-role="dropdownlist"
2.       data-bind="source: items, value: selected"
3.       data-text-field="text"
4.       data-value-field = "value"
5./>
6.
7.<button data-bind="click: getSelected">Get Selected Value</button>

01.var vm = kendo.observable({
02.    getSelected: function () {
03.        alert(vm.selected);
04.    },
05.
06.    items: [
07.        { value: 1, text: "Item 1" },
08.        { value: 2, text: "Item 2" },
09.        { value: 3, text: "Item 3" }
10.    ],
11.
12.    selected: undefined
13.});
14.
15.kendo.bind($("body"), vm);​

 

[Alexander Popov]

Hello Vincent,

I am not sure I understand you correctly. I've replicated the scenario, and it seems that the initial "selected" value is undefined. As a result, the DropDownList has no selected item and its value method returns undefined, as expected. Keep in mind that the "selected" value should be either an object or a numeric value matching the "value" field. Here is an updated example. Let me know if I am missing something.

Regards,
Alexander Popov
Telerik

 

 

[Vincent]

Thanks I got it now!