resize.md

title	page_title	description	slug	tags	published	position
Resize	TileLayout - Resize	Resize items in the TileLayout for Blazor.	tilelayout-resize	telerik,blazor,tile,layout,dashboard,resize	true	15

TileLayout Resize

Resize tiles by dragging their bottom and right borders to change the dashboard to your liking.

To enable resizing:

1. Set the Resizable parameter of the main TelerikTileLayout tag to true.

2. Set the RowHeight and ColumnWidth parameters of the TelerikTileLayout. The provided values must be in absolute units—this allows for the layout to correctly calculate the position of each tile during resizing.

@template

Resizing a tile fires the OnResize event.

caption Resizing tiles in the TileLayout

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

Next Steps

• Enable tile reordering.
• Handle Tile Layout events.
• Manage the Tile Layout state.

See Also

• Overview
• Live Demo: TileLayout Resizing