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?