Layout Containers

The Telerik UI TileLayout HtmlHelper for ASP.NET Core 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
Not finding the help you need? Improve this article