editor & dataSource

by Mahmoud Kandeel

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="example">
  <input type="text" id="firstname" data-bind="value: person.Firstname" />
  <input type="text" id="lastname" data-bind="value: person.Lastname" />
  <br />
  <br />
  <table border="1">
    <thead>
      <tr>
        <th>id</th>
        <th>description</th>
        <th>rank</th>
      </tr>
    </thead>
    <tbody data-template="row-template" data-bind="source: person.Likes"></tbody>
  </table>
</div>

<script id="row-template" type="text/x-kendo-template">
  <tr>
    <td data-bind="text: id">
    </td>
    <td data-bind="text: description">
    </td>
    <td data-bind="text: rank"></td>
  </tr>
</script>

JavaScript

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "/echo/json/",
      type: "POST",
      data: {
        json: JSON.stringify([{
          Firstname: "Jim",
          Lastname: "Smith",
          Birthday: "08/29/1979",
          Likes: [{
              id: 1,
              description: "Baseball",
              rank: 1
            },
            {
              id: 2,
              description: "music",
              rank: 3
            },
            {
              id: 3,
              description: "Surfing the web",
              rank: 2
            }
          ]
        }])
      }
    }
  },
  change: function() {
    var viewModel = kendo.observable({
      person: this.view()[0]
    });

    kendo.bind($("#example"), viewModel);
  }
});

dataSource.read();