title: Why kendo.observable do not read datasource
body: <p>Could you explain why kendo ui observable do not read data source when bind to html ?</p>
  
  <p>I based my code on this example : <a href="http://demos.telerik.com/kendo-ui/mvvm/remote-binding" rel="nofollow">http://demos.telerik.com/kendo-ui/mvvm/remote-binding</a></p>
  
  <p>I don't understand the link between the dropdown and the observable.</p>
  
  <pre><code>InitObservable = function (Id) {
  viewModel = kendo.observable({
      //create a dataSource
      tacheDataSource: new kendo.data.DataSource({
          autoSync: true,
          transport: {
              read: {
                  url: function () {
                      return crudServiceBaseUrl + "/Taches?ID=" + Id;
                  },
                  method: "GET",
                  dataType: "json"
              }
              ,
              update: {
                  url: crudServiceBaseUrl + "/Taches",
                  method: "PATCH",
                  dataType: "json"
              }
              ,
              destroy: {
                  url: crudServiceBaseUrl + "/Taches/Destroy",
                  dataType: "json"
              }
              ,
              create: {
                  url: crudServiceBaseUrl + "/Taches",
                  method: "POST",
                  dataType: "json"
              }
              ,
              parameterMap: function (options, operation) {
                  if (operation !== "read" &amp;&amp; options.models) {
                      return { models: kendo.stringify(options.models) };
                  }
              }
          },
          batch: true,
          pageSize: 20,
          schema: {
              model: {
                  id: "ID",
                  fields: TacheFields
              }
          }
      }), // endDatasource
      selectedTache: null, //this field will contain the edited dataItem
      hasChange: false,
      save: function (e) {
          this.tacheDataSource.sync();
          this.set("hasChange", false);
      },
      remove: function () {
          if (confirm("Etes vous sûr(e) de vouloir supprimer cette tâche ?")) {
              this.tacheDataSource.remove(this.selectedTache);
              this.set("selectedTache", this.tacheDataSource.view()[0]);
              this.change();
          }
      },
      showForm: function () {
          return this.get("selectedTache") !== null;
      },
      change: function () {
          this.set("hasChanges", true);
      }//,
      //cancel: function () {
      //    this.dataSource.cancelChanges(); //calcel all the change
      //    validator.hideMessages(); //hide the warning messages
      //    $("#tacheWindow").data("kendoWindow").close();
      //}
  });
  kendo.bind($("#tacheWindow"), viewModel);
  }
  </code></pre>
  
  <p>I tested the datasource alone with datasource.read(), it works.</p>
  
  <p>What is the trigger of the read of the datasource ?</p>
  
  <p>----- New details</p>
  
  <p>I added</p>
  
  <pre><code>type: "odata-v4"
  </code></pre>
  
  <p>in the datasource and I updated the schema as this :</p>
  
  <pre><code>e
  schema: {
              data:function(data){
                  var toReturn = data.value;
                  return toReturn;
              },
              model: {
                  id: "ID",
                  fields: TacheFields
              }
          }
  </code></pre>
  
  <p>And this to force read()</p>
  
  <pre><code>viewModel.selectedTache = proprietesEcranTache.tacheId;
  if (viewModel.showForm()) {
      viewModel.tacheDataSource.read();
      kendo.bind($("#tacheWindow"), viewModel);
  }
  </code></pre>
  
  <p>I see my answer in network debugger of chrome and I know I receive data in the form witout error but no data are displayed.</p>
  
  <p>Here the oData answer</p>
  
  <pre><code>{
      "@odata.context":"http://localhost:14986/odata/$metadata#Taches","value":
      [
          {
          "ID":1,"Description":"D\u00e9marrage application","CreateurId":7,"TypeTacheID":1,"EtatTacheID":6,"ValidantId":null,"DateValidation":null,"EstValidee":false,"CommentaireValidation":null,"EvennementPrecedentID":null
          }
      ]
  }
  </code></pre>
  
  <p>Here is my form</p>
  
  <pre><code>&lt;div id="tacheWindow"&gt;
  &lt;form id="TacheForm"&gt;
      &lt;ul class="TacheFormFields"&gt;
          &lt;li class=""&gt;
              &lt;div class="formFieldTitle"&gt;Id&lt;/div&gt;
              &lt;div class="formFieldInput textField"&gt;&lt;input id="tacheId" type="text" data-bind="value: ID" /&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
                  &lt;div class="formFieldTitle"&gt;Type de tâche&lt;/div&gt;
                  &lt;select id="typesTachesDdl" data-role="dropdownlist"
                          data-bind="value: TypeTacheID"
                          data-value-primitive="true"
                          data-text-field="Nom"
                          data-value-field="ID"&gt;&lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="formFieldTitle"&gt;Description&lt;/div&gt;
                  &lt;div class="formFieldInput textField"&gt;
                      &lt;input type="text" data-bind="value: Description" /&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="formFieldTitle"&gt;Createur&lt;/div&gt;
                  &lt;select id="CreateursDdl" data-role="dropdownlist"
                          data-bind="value: CreateurId"
                          data-value-primitive="true"
                          data-text-field="Nom"
                          data-value-field="ID"&gt;&lt;/select&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="formFieldTitle"&gt;Validant&lt;/div&gt;
                  &lt;select id="ValidantsDdl" data-role="dropdownlist"
                          data-bind="value: ValidantId"
                          data-value-primitive="true"
                          data-text-field="Nom"
                          data-value-field="ID"
                          disabled="disabled"&gt;&lt;/select&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="dialog_buttons"&gt;
          &lt;button id="TacheFormTemplateSave" data-bind="click: observableSave" class="k-button"&gt;Ok&lt;/button&gt;
          &lt;button id="TacheFormTemplateSave" data-bind="click: observableCancel" class="k-button"&gt;Annuler&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>