Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
114
rated 0 times [  117] [ 3]  / answers: 1 / hits: 18749  / 11 Years ago, wed, august 28, 2013, 12:00:00

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?


More From » kendo-ui

 Answers
33

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.


[#76086] Monday, August 26, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
rocioblancac

Total Points: 699
Total Questions: 96
Total Answers: 108

Location: Libya
Member since Mon, Dec 7, 2020
4 Years ago
;