Grid checkbox kendoui

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="HeaderTmpGrid0">
	# var checkboxGuid = kendo.guid(); #
	<input class="k-checkbox" 
		data-role="checkbox" 
		aria-label="Select all rows" 
		aria-checked="false" 
		type="checkbox" 
		id="#= checkboxGuid #">
	<label for="#= checkboxGuid #" 
			class="k-checkbox-label k-no-text">##&\\#8203;##</label>
</script>

<div id='grid0'>
</div>
<p>

</p>
<div id='grid1'>
</div>
<p>

</p>
<div id='grid2'>
</div>

JavaScript

$("#grid0").kendoGrid({
  columns: [{
    "selectable": true
  }, "c10", "c20", "c30"],
  dataSource: [{
    c10: "BG",
    c20: "Ta1",
    c30: "teST"
  }, {
    c10: "USA",
    c20: "Ta1",
    c30: "teST"
  }]
});

$("#grid1").kendoGrid({
  columns: [{
    "selectable": true,
    headerTemplate: kendo.template($("#HeaderTmpGrid0").html())
  }, "c1", "c2", "c3"],
  dataSource: [{
    c1: "BG",
    c2: "Ta1",
    c3: "teST"
  }, {
    c1: "USA",
    c2: "Ta1",
    c3: "teST"
  }]
});

$("#grid2").kendoGrid({
  columns: [{
    "selectable": true,
    headerTemplate: kendo.template($("#HeaderTmpGrid0").html())
  }, "c1", "c2", "c3"],
  dataSource: [{
    c1: "BG",
    c2: "Ta1",
    c3: "teST"
  }, {
    c1: "USA",
    c2: "Ta1",
    c3: "teST"
  }]
});