Layout Containers
The Telerik UI TileLayout for ASP.NET MVC component tiles are configured by using the Containers configurator.
Dimensions
Each tile can span across several rows and columns. The space that the tile takes up is determined by its container RowSpan() and ColSpan().
Headers
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";