Blazor TileLayout Overview

The Blazor TileLayout component is based on the two-dimensional CSS grid and displays its content in tiles. Users can drag to rearrange and drag to resize tiles. The tiles can span across multiple rows and columns. This allows you to build customizable dashboards for your users, save and restore the layout state.

The TileLayout component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor TileLayout

Use the TelerikTileLayout tag.
Set the desired number of Columns for the layout.
(optional) Configure the Width, Height, ColumnWidth or RowHeight to define the desired dimensions of the layout and the base size of the individual tiles.
(optional) set the Resizable and Reorderable parameters to true to allow the user to alter the layout.
Add <TileLayoutItem> instances inside a <TileLayoutItems> tag. Set the HeaderText parameter of each tile, and add a nested <Content> tag for the tile content.
(optional) Set the RowSpan and ColSpan parameters of the tiles to values larger than 1 to increase their size in the grid.

Basic Tile Layout

<TelerikTileLayout Columns="3"
                   RowHeight="150px"
                   Resizable="true"
                   Reorderable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>Regular-sized first tile.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>You can put components in the tiles too.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 3" RowSpan="3">
            <Content>This tile is three rows tall.</Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 4" RowSpan="2" ColSpan="2">
            <Content>This tile is two rows tall and two columns wide</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

Layout and Appearance

The TileLayout is based on the CSS Grid concept. Basically, the component layout depends on columns and rows with predefined or automatic dimensions. You can set the spacing between rows and columns. Finally, tiles can also span over multiple rows and columns.

Tile Content

Each tile (<TileLayoutItem>) in the TileLayout provides a few configuration options to control its header and content.

Resizing

Users can resize individual tiles for better user experience and content visibility.

Reordering

Users can also rearrange tiles, according to their preferences.

State

The Tile Layout allows getting and setting its state. The TileLayout state contains information about the tiles' order, column span and row span.

Events

The Tile Layout fires events when the user resizes or rearranges tiles. This allows custom logic execution, refreshing of nested components and saving the TileLayout state for later restore.

TileLayout Parameters

The following table lists the Tile Layout parameters. Also check the TileLayout API Reference for a full list of all properties, methods and events.

Parameter	Type and Default Value	Description
`Class`	`string`	The custom CSS class of the `<div class="k-tilelayout">` element. Use it to override theme styles.
`ColumnSpacing`	`string` (`"16px"`)	The empty space between columns.
`Columns`	`int`	The number of columns in the Tile Layout.
`ColumnWidth`	`string`	The width of one tile. If not set, the tile widths will distribute evenly.
`Height`	`string`	The Tile Layout height. If not set, the component will expand automatically to fit all rows.
`RowHeight`	`string`	The height of one tile. If not set, the base tile height will be set by the component, based on the highest tile.
`RowSpacing`	`string` (`"16px"`)	The empty space between rows.
`Reorderable`	`bool`	Enables tile reordering.
`Resizable`	`bool`	Enables tile resizing.
`Width`	`string`	The Tile Layout width. If not set, the component will expand horizontally to fill its parent.

TileLayoutItem Parameters

Parameter	Type and Default Value	Description
`Class`	`string`	The custom CSS class of the `<div class="k-tilelayout-item">` element. Use it to override theme styles.
`ColSpan`	`int` (`1`)	How many columns a tile will span over.
`HeaderText`	`string`	The tile header as plain text. For rich text, use a nested `<HeaderTemplate>` tag.
`Id`	`string`	Tile IDs are not rendered in the HTML markup. The component provides them in the `OnReorder` and `OnResize` event arguments.
`RowSpan`	`int` (`1`)	How many rows a tile will span over.

TileLayout Reference

Use the component reference to execute methods and get or set the TileLayout state.

Method	Description
`GetState`	Returns the current state of the Tile Layout as a `TileLayoutState` object.
`SetState`	Applies the provided `TileLayoutState` argument as a new state of the Tile Layout.

<TelerikTileLayout @ref="@TileLayoutRef" />

<TelerikButton OnClick="@GetTileLayoutState">Get TileLayout State</TelerikButton>

@code{
    TelerikTileLayout TileLayoutRef { get; set; }

    async Task GetTileLayoutState()
    {
        var tileState = TileLayoutRef.GetState();
    }
}

Next Steps

Explore Tile Layout appearance settings.
Find how to set tile content.
Enable tile resizing and reordering.
Handle Tile Layout events.
Manage the Tile Layout state.