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.

Telerik UI for Blazor Ninja image

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.

Creating Blazor TileLayout

  1. Use the TelerikTileLayout tag.
  2. Set the desired number of Columns for the layout.
  3. (optional) Configure the Width, Height, ColumnWidth or RowHeight to define the desired dimensions of the layout and the base size of the individual tiles.
  4. (optional) set the Resizable and Reorderable parameters to true to allow the user to alter the layout.
  5. Add <TileLayoutItem> instances inside a <TileLayoutItems> tag. Set the HeaderText parameter of each tile, and add a nested <Content> tag for the tile content.
  6. (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

See Also

In this article