Kendo User Interface

Question

I am using the Kendo UI dropdown in the watchlist

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

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 expect that when the page loads, the selected status ID of the participants will be captured by the drop-down list as selectedValue, binding the StatusId attribute of the StatusId participants to the drop-down list, like this data-bind="value:StatusId" . But this is strange in my case, it throws an error

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

when I deleted data-bind="value:StatusId" , the error disappeared, but did not select the corresponding selected value.

Any ideas on this error?

Answer 1

I see two possible problems.

Firstly, your data-bind="value: StatusId" . Is your StatusId your ViewModel? I do not see this, but it is an extended object, so it can be defined before your inserted code.

The second problem, and this, in my opinion, is not at all obvious, is that the drop-down list returns the full object from your list data source; not just the requested property / field.

See this demo page on your website for an example: http://demos.kendoui.com/web/mvvm/widgets.html

In particular, they use a helper function to return a string representation of an object. Instead, you can only return 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 confusing, but I just worked it out myself, and in the future this should not be too big a deal.