Check/Uncheck functionality inside Telerik Kendo grid is not working

I am using Telerik kendo grid in my application. I am trying to achieve select-all functionality in grid. There is a check box in the header of the grid. When I click the header checkbox, checkboxs inside the rows will be checked automatically and vice versa.

My code for kendo grid is:

@(Html.Kendo().Grid<BulkInsertUpdate.Models.Product>()
      .Name("ProductGrid")
      .Columns(col =>
      {
          col.Template(m => { }).ClientTemplate("<input type='checkbox' id='chkSelect_#= ProductID#' userId='#= ProductID#' class='box' />").Width(10)
          //col.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='chkSelect_#= ProductID#' />")
          //col.Template(@<text><input class="box" id="chkSelect" name="chkSelect" type="checkbox" /></text>)
                      .HeaderTemplate("<input type='checkbox' id='checkAll' />").Width(10);
          col.Bound(m => m.ProductID).Hidden(true);
          col.Bound(m => m.ProductName).Width(155).Title("Product Name");
          col.Command(cmd =>
          {
              cmd.Destroy();
          }).Width(20);
      })
      //.ToolBar(toolbar => toolbar.Create())
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          //toolbar.Save();
          //toolbar.Custom().Text("Select All")
          //    .HtmlAttributes(new { onclick = "deleteSelection(event)" });
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(300))
      .Filterable(filterable => filterable
          .Extra(false)
          .Operators(op => op.ForString(str => str.Clear()
              .StartsWith("Starts with")
              .IsEqualTo("Is equal to")
              .IsNotEqualTo("Is not equal to")
              .Contains("Contains")
              ))
      )
      .Resizable(re => re.Columns(false))
      .Reorderable(reo => reo.Columns(false))
      .DataSource(ds => ds.Ajax()
          .Batch(true)
          .Events(events => events.Error("error_handler"))
          .Model(mod =>
          {
              mod.Id(com => com.ProductID);
          })
          .Read(read => read.Action("Product_Read", "Product"))
      //  .Update(update => update.Action("Product_Update", "Product"))
      //.Destroy(destroy => destroy.Action("ComponentType_Delete", "ComponentType"))
      ))

And stylesheet:

<style type="text/css">
    .box {
        background-color: blueviolet;
    }
    </style>

I have tried two ways. 1. First way my java script is like:

<script>
$(document).ready(function () {
        $('#checkAll').click(function () {
            if ($(this).attr('checked')) {
                $("#ProductGrid tbody input:checkbox").attr("checked", this.checked);
            } else {
                $("#ProductGrid tbody input:checkbox").removeAttr("checked");
            }
        });
    });
</script>

But it is always executing the else part.

2. The second way I use .box class which I have already mentioned.

The script is like:

<script>
$(document).ready(function () {
       $("#checkAll").click(function () {
           $(".box").attr("checked", $(this).attr("checked") ? true : false);
        });
    });
</script>

The same thing is happening here also. I am using Northwind database and MVC 5.

Any help will be thankfully accepted.

Thanks

Partha