title: Kendo UI: Unable to bind data to list view using MVVM
body: <p>I am new to kendo ui mvvm and am facing the follow issue: </p>
  
  <p><strong>Scenario</strong>
  I need to populate few fields in a div whose role is a listview, using the MVVM format.</p>
  
  <p>The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.</p>
  
  <p>Follow is my JSBin Sample: <a href="http://jsbin.com/ajoyug/6/edit" rel="nofollow">http://jsbin.com/ajoyug/6/edit</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="myListView" data-role="listView" data-bind="source:dataSource"&gt;
      &lt;span data-bind="text:prodName"&gt;&lt;/span&gt;
      &lt;span data-bind="text:qty"&gt;&lt;/span&gt;
      &lt;span data-bind="text:total"&gt;&lt;/span&gt;
      &lt;span data-bind="text:price"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(document).ready(function(){
  var data = [
      {
      "Id":1,
      "img":"../public/images/product/shoes.png",
      "code":"00021543",
      "fullProdName":"Jimmy Choo - Simone Pump Shoes",
      "prodName":"Simone Pump Shoes",
      "description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
      "price":"1500.0",
      "total":"1500.0",
      "qty":"1",
      "discount":"0.00",
      "brand":"Jimmy Choo",
      "category":"Shoes",
      "points":"100",
      "tax":"0.00" }
  ];
  
    var dataSource = new kendo.data.DataSource({
      data: data, 
      pagesize: 10,
      schema: {
        model: {
          id: "Id",
          fields: {
            prodName: { editable: false},
            qty: { editable: true},
            price: { editable: false},
            total : {editable :false}
          }
        }
      }
    });
  
  dataSource.read();
  
    var listViewModel = kendo.observable({
      dataSource:dataSource
    });
    kendo.bind($("#myListView"), listViewModel);
  });
  </code></pre>
  
  <p>Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...</p>
  
  <p><strong>Questions</strong>
  How shall I bind the fields from a dataSource?</p>
  
  <p>My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?</p>
  
  <p>Thanks!!</p>
  
  <p>Hardik</p>