containers.header.templateString|Function
The template that will be rendered as a header.
Example - set the headerTemplate using a function
<script id="first" type="text/x-kendo-template">
<h3>A</h3>
</script>
<script id="second" type="text/x-kendo-template">
<h3>B</h3>
</script>
<script id="headerOne" type="text/x-kendo-template">
"Item one"
</script>
<script id="headerTwo" type="text/x-kendo-template">
"Item two"
</script>
<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
containers: [
{
colSpan: 1,
rowSpan: 1,
header: {
template: kendo.template($("#headerOne").html())
},
bodyTemplate: kendo.template($("#first").html())
},
{
colSpan: 1,
rowSpan: 1,
header: {
template: kendo.template($("#headerTwo").html())
},
bodyTemplate: kendo.template($("#second").html())
}
],
columns: 4
});
</script>Example - set the header template using string
<script id="first" type="text/x-kendo-template">
<h3>A</h3>
</script>
<script id="second" type="text/x-kendo-template">
<h3>B</h3>
</script>
<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
containers: [
{
colSpan: 1,
rowSpan: 1,
header: {
template: "<span>Item one</span>"
},
bodyTemplate: kendo.template($("#first").html())
},
{
colSpan: 1,
rowSpan: 1,
header: {
template: "<span>Item two</span>"
},
bodyTemplate: kendo.template($("#second").html())
}
],
columns: 4
});
</script>In this article