Class

TelerikTileLayout

Declaration

public TelerikTileLayout()

Sets the horizontal space between tile columns using CSS units. Use pixel values like "16px" (default), "20px", or percentage values like "2%". When different from RowSpacing, creates asymmetric spacing for custom layouts.

Declaration

[Parameter]
public string ColumnSpacing { get; set; }

Property Value

Controls the width of each column in the TileLayout using CSS values. Use "1fr" (default) for equal-width flexible columns, "200px" for fixed pixel widths, or "20%" for percentage-based widths. Works together with Columns to define the overall TileLayout structure that is based on a CSS grid. A fixed absolute value is required when Resizable is enabled to ensure proper tile resizing behavior.

Declaration

[Parameter]
public string ColumnWidth { get; set; }

Property Value

Sets the fixed number of columns in the TileLayout. Use positive values like 2, 3, or 4. To define the column widths, use ColumnWidth.

Declaration

[Parameter]
public int Columns { get; set; }

Property Value

Controls the total height of the TileLayout component using CSS values. Use "600px" for fixed pixel height, "100vh" for full viewport height, "50%" for percentage of parent height, or leave unset for automatic vertical expansion. When not set, the component automatically expands to fit all tile rows based on RowHeight.

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Enables keyboard navigation and interaction with the TileLayout component. When enabled, users can navigate between tiles using arrow keys, resize tiles using Ctrl+Arrow keys, and reorder tiles using Shift+Arrow keys. Provides accessibility support for users who prefer or require keyboard-only interaction. The default value is false.

Declaration

[Parameter]
public bool Navigable { get; set; }

Property Value

Fires when a user completes reordering a tile by dragging it to a new position. The event provides the Id of the moved tile to identify which tile was repositioned. Use this event to save layout changes, update data models, or respond to user layout rearrangements. Only triggered when Reorderable is enabled.

Declaration

[Parameter]
public EventCallback<TileLayoutReorderEventArgs> OnReorder { get; set; }

Property Value

Fires when a user completes resizing a tile by dragging its resize handles. The event provides the Id of the resized tile to identify which tile was modified. Use this event to save layout changes, update data models, or respond to user layout customizations. Only triggered when Resizable is enabled.

Declaration

[Parameter]
public EventCallback<TileLayoutResizeEventArgs> OnResize { get; set; }

Property Value

Enables users to reorder tiles by dragging them to new positions. When enabled, users can click and drag any tile header to rearrange the layout order. The other tiles automatically adjust their positions during the drag operation. Triggers the OnReorder event when users complete a reorder operation.

Declaration

[Parameter]
public bool Reorderable { get; set; }

Property Value

Enables users to resize tiles by dragging their edges or corners. When enabled, tile edges show resize arrows on mouseover. Requires both RowHeight and ColumnWidth to have fixed absolute CSS values (not "auto") for proper resize operation. Triggers the OnResize event when users complete a resize operation.

Declaration

[Parameter]
public bool Resizable { get; set; }

Property Value

Controls the height of each row in the TileLayout using CSS values. Use "1fr" (default) for equal-height flexible rows, "150px" for fixed pixel heights, or "20%" for percentage-based heights. A fixed absolute value is required when Resizable is enabled to ensure proper tile resizing behavior.

Declaration

[Parameter]
public string RowHeight { get; set; }

Property Value

Sets the vertical space between tile rows using CSS units. Use pixel values like "16px" (default), "20px", or percentage values like "2%". When different from ColumnSpacing, creates asymmetric spacing for custom layouts.

Declaration

[Parameter]
public string RowSpacing { get; set; }

Property Value

Contains the collection of tiles that make up the TileLayout content. Place individual TileLayoutItem components inside this container to define your dashboard, workspace, or custom tile-based interface. Each tile can have different content and span multiple rows or columns. Children: TileLayoutItem tags.

Declaration

[Parameter]
public RenderFragment TileLayoutItems { get; set; }

Property Value

Controls the total width of the TileLayout component using CSS values. Use "80%" for container-relative width, "800px" for fixed pixel width, "80vw" for viewport-relative width. When not set, the component expands to fill its parent container horizontally.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Overrides ComponentBase.BuildRenderTree(RenderTreeBuilder)

Declaration

public override void Dispose()

Overrides BaseComponent.Dispose()

Retrieves the current state of all tiles including their positions, sizes, and order. The returned TileLayoutState contains a complete snapshot of the layout that can be stored, modified, or applied later using SetState(TileLayoutState). Use this method to implement save/restore functionality or layout persistence.

Declaration

public TileLayoutState GetState()

Returns

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Returns

Overrides BaseComponent.OnAfterRenderAsync(bool)

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Returns

Overrides ComponentBase.SetParametersAsync(ParameterView)

Applies a saved layout state to update tile positions, sizes, and order. The state values are applied sequentially to tiles in the component markup based on their declared order. Use this method to restore previously saved layouts, implement layout presets, or programmatically modify the layout. The component will automatically re-render to reflect the new layout after applying the state.

Declaration

public void SetState(TileLayoutState source)

Parameters