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

Layout Containers

The Kendo UI TileLayout widget tiles are configured by using an array of container objects.


Each tile can span across several rows and columns. The space that the tile takes up is determined by its container rowSpan and colSpan.


The tiles can be configured with our without headers.

Headers are required if using the reorderable functionality of the widget.

The headers render their content via the header.text which is plain text or by utilizing a header.template.

Body content

The main tile content is rendered from the bodyTemplate that can also be plain text or a complex template with widgets in it.

Container Styles

The TileLayout exposes an object that allows you to override the following styles:

    var tileLayoutStyles = {
        wrapper: "k-widget k-tilelayout",
        item: "k-tilelayout-item k-card",
        itemHeader: "k-tilelayout-item-header k-card-header",
        itemHeaderTitle: "k-card-title",
        itemBody: "k-tilelayout-item-body k-card-body",
        reorderHint: "k-layout-item-hint k-layout-item-hint-reorder",
        resizeHint: "k-layout-item-hint k-layout-item-hint-resize"

To override any of the classes, add your own or remove some, insert the new definition before the widget is initialized:

    kendo.ui.TileLayout.styles.item = "k-tilelayout-item k-card my-own-class";

See Also

In this article