Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
 <table id="grid">
    <thead>
        <tr>
          <th><input class="parentCheckbox" type="checkbox"/>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td><input type="checkbox" class="childCheckbox"/>Cell1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
        </tr>
        <tr>
          <td><input type="checkbox" class="childCheckbox"/>Cell1</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
          <td>Cell 4</td>
          <td>Cell 5</td>
        </tr>
    </tbody>
  </table>

JavaScript

var $grid = $('#grid');
var grid = $grid.kendoGrid().data('kendoGrid');
var rowCount = 2;

$('.parentCheckbox').click(function () {
     $('.childCheckbox').prop('checked',this.checked);
});

$('.childCheckbox').click(function () {
     var checkeBoxesCount = $grid.find('input[checked="true"]').size();
    $('.parentCheckbox').prop('checked',checkeBoxesCount == rowCount);
});