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