Edit this page

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 <a> element. As a result the template must contain only inline elements.

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>'
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</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 # } #')
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>