Kendo UI Dropdownlist data binding of value

Question

I'm using Kendo UI dropdownlist inside a listview

<ul data-role="listview" id="participants-listview" data-style="inset" data-template="participants-listview-template" data-bind="source: participants, events { click: onSelectParticipant }" />

<script type="text/x-kendo-template" id="listview-template">
    <div>
            <span>#:RoleDesc#</span> 
            <span>
                <select data-role="dropdownlist" id="status-id"
                        data-text-field="StatusDesc" 
                        data-value-field="StatusId"
                        data-bind="value: StatusId, source: participantStatuses, events: { change: onParticipantStatusChange }" 
                        name="Status" 
                        required="required" 
                        validationMessage="required">
                </select>
            </span> 
    </div>
</script>

the viewModel

viewModel = kendo.data.ObservableObject.extend({
    dataSource: new kendo.data.DataSource({
            transport: {
                type: "odata",
                read: {
                    url: function() {
                        return meetings/participants";
                    }
                }
              }        
        }),
    participants: [], //listview data
    participantStatuses: [   // dropdownlist selection 
            { StatusId: 1, StatusDesc: "Invited" } ,
            { StatusId: 6, StatusDesc: "Present" }, 
            { StatusId: 7, StatusDesc: "Absent" } 
        ],
    selectedParticipant: null,
    showListView: function(e) {
        viewModel.dataSource.fetch(function(){
                var data = viewModel.dataSource.data();
                meetingViewModel.set("participants", data);
            });
    },

I'm expecting that the when the page load, the selected statusId of the participants will be captured by the dropdownlist as selectedValue by binding the particpants' StatusId to the value property of the dropdown, like this data-bind="value:StatusId". But it's wierd in my case, it's throwing an error

 Uncaught TypeError: Object #<Object> has no method 'get' 

when I removed the data-bind="value:StatusId", the error is gone but It doesnt select the appropriate selected value.

Any ideas about this bug?

Answer 1

I see two possible issues.

First, your data-bind="value: StatusId". Is StatusId in you ViewModel? I don't see it, but it's an extended object so it may be defined before your pasted code.

The second issue, and this is not at all obvious in my opinion, is that the dropdownlist returns the full object from your list datasource; not just the requested property/field.

See this demo page at their web site for an example: http://demos.kendoui.com/web/mvvm/widgets.html

Specifically, they use a helper function to return a string representation of the object. You could instead return just the StatusId as you want.

<h4>DropDownList </h4>
<select data-role="dropdownlist"
        data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue">
</select>

Script:

dropDownListValue: null,
displayDropDownListValue: function() {
    var dropDownListValue = this.get("dropDownListValue");
    return kendo.stringify(dropDownListValue);
}

It seems rather convoluted, but I just worked through this myself and it shouldn't be too big of a deal to account for in the future.