CRUD local database with Kendo

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
  <script type="text/kendo" id="rowEditor">
      <td colspan="4">
        <div id="productValues">       
          <ul>
            <li>
              <label>Name:<input type="text" data-bind="value:Todo" /></label>
            </li>
            <li>
              <label>Completed:<input type="checkbox" data-bind="checked:Completed" /></label>
            </li>
            <li>
               <button class="k-button" data-bind="click:save">Save</button>
               <button class="k-button" data-bind="click:cancel">Cancel</button>
            </li>
          </ul>
        </div>
      </td>
  </script>
  <button id="addButton" class="k-button">Add a new product</button>
  <div id="grid">

CSS

body {
    font-family: Segoe UI Light
}

JavaScript

$(function () {
    var Task = $data.define("Task", {
        Todo: String,
        Completed: Boolean
        //,DueDate: Date
        //,Priority: Number
    });
    var grid = $('#grid').kendoGrid({
        dataSource: Task.asKendoDataSource(),
        filterable: true,
        sortable: true,
        pageable: true,
        columns: Task.getFieldNames().concat({ command: [{ name: "rowEdit", text: "Edit", click: function (e) {
              var row = $(e.currentTarget).closest("tr");
              editRow(row);
          }
          }]
          })
    }).data("kendoGrid");   

      $("#addButton").click(function (e) {
          grid.addRow();
          editRow(grid.tbody.children().first());              
      });

      var template = kendo.template($("#rowEditor").html());
      function editRow(row) {
          var item = grid.dataItem(row);
          var viewModel = kendo.observable($.extend(item.toJSON(), {
              save: function () {
                  kendo.unbind(row);
                  item.accept(viewModel.toJSON());
                  item.dirty = true;
                  grid.dataSource.sync();
              },
              cancel: function() {
                  kendo.unbind(row);
                  grid.refresh();
              }
          }));
          row.html(template(item));
          kendo.bind(row, viewModel);
      }
});