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

Tiles Configuration

Tiles represent the content containers within the TileLayout component and allow for a wide variety of layouts based on the application requirements. In order to define the tile containers, add TileLayoutItem components by nesting <kendo-tilelayout-item> tags inside <kendo-tilelayout>. They will hold the arbitrary content of the tile.

Each tile consists of two main sections, which yield for a logically separated structure and are responsible for aligning the content passed to them. Those sections are:

  • body(Required) - Configured by nesting a <kendo-tilelayout-item-body> element of type TileLayoutItemBody inside the tile. Any content passed to it will be rendered as the main content of the container.
  • header(Optional) - Configured either by passing a string to the title configuration option of the TileLayoutItem or by nesting a <kendo-tilelayout-item-header> element of type TileLayoutItemHeader inside the tile. Both approaches will result in rendering a header section above the body.

The header section of the tiles is required if the reorderable option of the TileLayout component is enabled. End-users will be able to drag the tiles through their headers.

The example below demonstrates how to structure the contents of the TileLayout tiles.

View Source
Edit In Stackblitz  
Change Theme:

Tile Size and Position

Each tile occupies a predefined number of rows and columns. The default size is 1 row and 1 column. To configure the number of rows and columns the tile will occupy, set its rowSpan and colSpan options. Additionally the tile allows you to pin-point its initial position to a specific column and row.

All available configuration options of the tiles related to sizing and positioning are:

  • rowSpanSpecifies the number of rows that tile will occupy.
  • colSpanSpecifies the number of columns that tile will occupy.
  • rowSpecifies the initial row of the tile.
  • colSpecifies the initial column of the tile.
  • orderSpecifies the index order of the tile. By default the tiles are ordered sequentially according to their position in the DOM.

For additional details and examples on how to configure the specific column and row size, refer to the Columns and Rows Dimensions article.

The following example demonstrates how to set various row and column spans for the tiles.

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?