title: How to bind a Kendo DropDownList to an Observable class?
body: <p>I'm having problems in making a DropDownList work with an Observable class.</p>
  
  <p>Here's the code for the observable class:</p>
  
  <pre><code>var viewModel = kendo.observable({
              dsMember: new kendo.data.DataSource({
                  type: "json",
                  serverFiltering: true,
                  serverPaging: true,
                  pageSize: 6,
                  error: function (e) {
                      top.CustomError(e);
                  },
                  transport: {
                      read: {
                          contentType: "application/json; charset=utf-8",
                          type: "GET",
                          url: function () {
                              return "../api/Member/" + viewModel.MemberParam;
                          },
                          dataType: "json",
                          cache: false,
                          complete: function (e) {
                              viewModel.set("SelectedMember", viewModel.dsMember.view()[0]);
                          }
                      },
                      update: {
                          contentType: "application/json; charset=utf-8",
                          type: "POST",
                          url: "../api/Member",
                          dataType: "json",
                          cache: false,
                          complete: function (e, textStatus) { top.CustomSuccess(e, textStatus); }
                      },
                      destroy: {
                          contentType: "application/json; charset=utf-8",
                          url: "../api/Member",
                          type: "DELETE",
                          dataType: "json",
                          cache: false,
                          complete: function (e) {
                              viewModel.NewRecord();
                          }
                      },
                      create: {
                          contentType: "application/json; charset=utf-8",
                          type: "PUT",
                          url: "../api/Member",
                          cache: false,
                          complete: function (e, textStatus) {
                              if (typeof (e.responseText) != "undefined") {
                                  var response = $.parseJSON(e.responseText);
                                  var obj = viewModel.dsMember.view()[viewModel.dsMember.view().length - 1];
                                  obj.MemberId = response.MemberId;
                                  viewModel.set("SelectedMember", obj);
                                  document.getElementById("tbMemberId").value = obj.MemberId;
  
                                  top.CustomSuccess(e, textStatus);
                              }
                          }
                      },
                      parameterMap: function (data, operation) {
                          return kendo.stringify(data);
                      }
                  },
                  batch: true,
                  schema: {
                      model: {
                          id: "MemberId",
                          fields: {
                              MemberId: {
                                  type: "number",
                                  editable: false // this field is not editable
                              },
                              MemberName: {
                                  type: "text",
                                  validation: { // validation rules
                                      required: true // the field is required
                                  }
                              },
                              id_function_club: {
                                  type:"number"
                              },
                              name_function_club: {
                                  type: "text"
                              }
                          }
                      }
                  }
              }),
              MemberParam: 0,
              SelectedMember: null,
              save: function () {
                  this.dsMember.sync();
              },
  
              remove: function () {
                  if (confirm("Are you sure you want to delete this record?")) {
                      this.dsMember.remove(this.SelectedMember);
                      this.set("SelectedMember", this.dsMember.view()[0]);
                      this.save();
                  }
              },
              NewRecord: function () {
                  var newRecord = new viewModel.dsMember.reader.model();
                  newRecord.MemberId = null;
                  viewModel.dsMember.add(newRecord);
                  viewModel.set("SelectedMember", viewModel.dsMember.view()[viewModel.dsMember.view().length - 1]);
              }
          });
  </code></pre>
  
  <hr>
  
  <p>And here is my working DropDownList:</p>
  
  <pre><code>$("#ddFunctionClub").kendoDropDownList({
              height: 150,
              dataTextField: "name",
              dataValueField: "id_function_club",
              dataSource: {
                  type: "json",
                  transport: {
                      read: {
                          contentType: "application/json; charset=utf-8",
                          type: "GET",
                          url: function () {
                              return "../api/Function_Club";
                          },
                          dataType: "json",
                          cache: false
                      }
                  }
              }
          });
  </code></pre>
  
  <hr>
  
  <p>Here's my html for the DropDownList:</p>
  
  <pre><code>&lt;input id="ddFunctionClub" style="width: 100%;" /&gt;
  </code></pre>
  
  <hr>
  
  <p>And finally, this is what I'm getting back from the observable datasource request:</p>
  
  <pre><code>{"MemberId":123,"MemberName":"Person","BirthDate":"10/01/1980","id_function_club":2,"name_function_club":"My Function","NameUnit":"My Unit"}
  </code></pre>
  
  <hr>
  
  <p>I did some research, but couldn't find any suitable example.</p>
  
  <p>I looked at:
  <a href="http://demos.kendoui.com/web/mvvm/widgets.html" rel="nofollow">MVVM Widget Binding</a> and played around with data-bind, data-value-field, data-text-field but couldn't get the results I wanted.</p>
  
  <p>Therefore, <strong>what I'm looking for is</strong>, a way of binding a regular DropDownList (one that is tied to a datasource) to an Observable class. For example, the text would be bound to SelectedMember.name_function_club and the value to SelectedMember.id_function_club.</p>
  
  <p>Can you help?</p>
  
  <p>If something is not quite clear, please leave a comment asking for more info.</p>
  
  <p>THANKS!</p>