columns.headerTemplate String|Function

The template which renders the column header content. By default the value of the title column option is displayed in the column header cell.

If sorting is enabled, the column header content will be wrapped in a <span> element.

Example - column header template as a string

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    headerTemplate: '<input type="checkbox" id="check-all" /><label for="check-all">Check All</label>'
  }],
  selectable: "multiple",
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

$("#check-all").change(function(e){
  var grid = $("#grid").data("kendoGrid");
  var selected = grid.select();

  if(selected.length > 0) {
    grid.clearSelection();
  } else {
    grid.select("tr:eq(0), tr:eq(1)");
  }
});
</script>

Example - column header template as a Kendo UI template function with conditional logic

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    headerTemplate: kendo.template('# if (true) { # <input type="checkbox" id="check-all" /><label for="check-all">Check All</label> # } else { # this will never be displayed # } #')
  }],
  selectable: "multiple",
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

$("#check-all").change(function(e){
  var grid = $("#grid").data("kendoGrid");
  var selected = grid.select();

  if(selected.length > 0) {
    grid.clearSelection();
  } else {
    grid.select("tr:eq(0), tr:eq(1)");
  }
});
</script>