New to Kendo UI for jQuery? Start a free 30-day trial

Containers.header

configuration

Holds the configuration settings for the header.

containers.header

Object

<div id="tilelayout"></div>
<script>
$("#tilelayout").kendoTileLayout({
    containers: [
        {
            colSpan: 2,
            rowSpan: 1,
            bodyTemplate: "<p>Container with header configuration</p>",
            header: {
                template: "<h3>Custom Header</h3>"
            }
        }
    ],
    columns: 4
});
</script>

containers.header.template

String|Function

The template that will be rendered as a header.

<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>

<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>

containers.header.text

String

The text that will be rendered as a header.

<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: {
                text: "Item one"
            },
            bodyTemplate: kendo.template($("#first").html())
        },
        {
            colSpan: 1,
            rowSpan: 1,
            header: {
                text: "Item two"
            },
            bodyTemplate: kendo.template($("#second").html())
        }
    ],
    columns: 4
});
</script>