New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Layout Containers

The Telerik UI TileLayout for ASP.NET MVC component tiles are configured by using the Containers configurator.


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() or Header.TemplateId().

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. for complex widgets, the BodyTemplateId() might be more suitable.

When using widgets inside the template, their ToClientTemplate() method needs to be called.

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