title: Kendo-Knockout: use knockout view model with kendo datasource
body: <p>I am doing some experiments with Kendo, Knockout and kendo-knockoutjs libraries. I want to use knockout view model with kendo datasource and to bind it to the kendo grid widget. </p>
  
  <p>In Kendo:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="reportGrid" data-bind="source: gridDataSource"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var billingReportViewModel = kendo.observable({
      gridDataSource: new kendo.data.DataSource({data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]})
  });
  
  $("#reportGrid").kendoGrid();
  
  kendo.bind($("#main"), billingReportViewModel);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zeQMT/71/" rel="nofollow">http://jsfiddle.net/zeQMT/71/</a></p>
  
  <p>What I want to accomplish:</p>
  
  <p>The html is the same as the example above. </p>
  
  <p>javascript:</p>
  
  <pre><code>var billingReportViewModel = ko.observable({
      gridDataSource: new kendo.data.DataSource({data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]})
  });
  
  $("#reportGrid").kendoGrid();
  
  
  ko.applyBindings(billingReportViewModel);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zeQMT/72/" rel="nofollow">http://jsfiddle.net/zeQMT/72/</a></p>
  
  <p>Obviuosly, this will not work because knockoutjs does not have <code>source</code> binding. Is it possible to create custom binding named <code>source</code> so that the current example will work? Any help with working code will be greatly appreciated. Thanks!</p>