Kendo UI - Add / Remove with kendo.data.DataSource

A simple example of using kendo.data.DataSource to render a "to do" item list, filter it, and add / remove items

by marhaba

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script id="template" type="text/x-kendo-template">
  <tr>
      <td> 
          <input type="checkbox" class="done" data-id="#= id #" #if(done){# checked="checked" #}#></input>
      </td>
      <td>
          #= id #
      </td>
      <td>
        #= description #
      </td>
  </tr>
</script>
    
<div id="example" class="k-content">

    <fieldset class=".add-new">
        <legend>Add A Todo</legend>
        <p>Enter a to do item description</p>
        <input name="description" />
        <button id="add">Add</button>
    </fieldset>
    
    <table id="todos" class="metrotable">
      <thead>
        <tr>
          <th>Done</th>
          <th>ID</th>
          <th>Task</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td colspan="3"></td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
            <td>Show: </td>
            <td colspan="2">
              <select id="filter">
                <option selected="selected" value="all">All</option>
                <option value="done">Complete</option>
                <option value="not done">Incomplete</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Actions: </td>
            <td colspan="2">
                <button id="remove-done">Remove Done Items</button>
            </td>
          </tr>
      </tfoot>
    </table>

</div>

CSS

thead {
    border-bottom: 1px solid #ccc;
}

th {
    padding: 5px;
    font-weight: bold;
}

td {
    padding: 5px;
}

fieldset {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
}

fieldset legend {
    padding: 3px 10px;
}

JavaScript

// To Do Item Template
  // -------------------

  var template = kendo.template($("#template").html());

  // To Do Item Data
  // ---------------

  // A hard coded list of items to render
  var tasks = [
    { id: 1, done: false, description: "do stuff"},
    { id: 2, done: false, description: "more stuff"},
    { id: 3, done: true, description: "this stuff to do"},
    { id: 4, done: false, description: "that stuff we need"}
  ];

  var currentId = 4;

  // Build the data source for the items
  var dataSource = new kendo.data.DataSource({ data: tasks });

  // When the data source changes, render the items
  dataSource.bind("change", function(e) { 
    var html = kendo.render(template, this.view());
    $("#todos tbody").html(html);
  });

  // Initial read of the items in to the data source
  dataSource.read();

  // Handle And Respond To DOM Events
  // --------------------------------
  
  // Handle adding a new to do item
  $("#add").click(function(e){
    e.preventDefault();

    var $todo = $("input[name='description']");

    currentId += 1;
    dataSource.add({
      id: currentId,
      done: false,
      description: $todo.val()
    });

    $todo.val("");
    $todo.focus();
  });

  // Handle removing cleared items
  $("#remove-done").click(function(e){
    e.preventDefault();

    var raw = dataSource.data();
    var length = raw.length;

    // iterate and remove "done" items
    var item, i;
    for(i=length-1; i>=0; i--){

      item = raw[i];
      if (item.done){
        dataSource.remove(item);
      }

    }

  });

  // Handling clicking the "done" checkboxes
  $("#todos").on("change", ".done", function(e){
    var $target = $(e.currentTarget);
    var id = $target.data("id");
    var item = dataSource.get(id);
    item.set("done", $target.prop("checked"));
  });

  // Handle the filters for showing the desired items
  $("#filter").change(function(e){
    var filterValue = $(e.currentTarget).val();

    var filter = {
      field: "done",
...