From f5b625e114753b4709ef126013075b876f65ccd9 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 4 Aug 2025 09:58:03 +0300 Subject: [PATCH] docs(TileLayout): Revamp Events article --- components/tilelayout/events.md | 106 ++++++++++++++++---------------- 1 file changed, 54 insertions(+), 52 deletions(-) diff --git a/components/tilelayout/events.md b/components/tilelayout/events.md index b2a38b9787..9dfd127748 100644 --- a/components/tilelayout/events.md +++ b/components/tilelayout/events.md @@ -3,132 +3,134 @@ title: Events page_title: TileLayout - Events description: Events of the TileLayout for Blazor. slug: tilelayout-events -tags: telerik,blazor,tile,layout,dashboard,events +tags: telerik, blazor, tilelayout, events published: True position: 30 --- # TileLayout Events -This article explains the events available in the Telerik TileLayout for Blazor: +This article explains the available events in the Telerik TileLayout for Blazor: * [OnResize](#onresize) * [OnReorder](#onreorder) ## OnResize -The `OnResize` event is fired when any tile is resized. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:tilelayout-state) for your users. +The TileLayout `OnResize` event fires when the user changes the dimensions of a tile. You can use the event to update the saved [TileLayout state](slug:tilelayout-state), or repaint a child component that needs it, such as the Telerik Chart. -The `OnResize` event provides an argument of type `TileLayoutResizeEventArgs`. It exposes two properties: +The `OnResize` event provides an argument of type `TileLayoutResizeEventArgs`. It exposes an `Id` `string` property that holds the ID of the resized tile item. -* `Id` (`string`) of the resized item - ->caption Respond to the Resize event and adjust components in the tile +>caption Handle the TileLayout OnResize event ````RAZOR -@* Respond to a tile resizing to resize its contents, if needed *@ - + OnResize="@OnTileLayoutResize"> - + - + - - + - + - - - - + - + -
- Elements whose dimensions are set as percentage of their parent - and can resize based on that may not require explicit code to handle - resizing of the tile layout. +
+ Tile children with percentage heights may not require + explicit code to handle TileLayout resizing.
- - Panel 3. + + Tile 3. - Panel 4. + Tile 4. +@if (!string.IsNullOrEmpty(LastResizedTileId)) +{ +

Last resized tile: @LastResizedTileId at @DateTime.Now.ToLongTimeString()

+} + @code { - TelerikChart ChartRef { get; set; } - void OnResizeHandler(TileLayoutResizeEventArgs args) + private TelerikChart? ChartRef { get; set; } + private List ChartData = new List() { 10, 2, 5, 6 }; + private string[] ChartCategories = new string[] { "Q1", "Q2", "Q3", "Q4" }; + + private string LastResizedTileId { get; set; } = string.Empty; + + private void OnTileLayoutResize(TileLayoutResizeEventArgs args) { - Console.WriteLine($"tile {args.Id} resized"); + LastResizedTileId = args.Id; + if (args.Id == "chart-tile") { - ChartRef.Refresh(); + ChartRef?.Refresh(); } } - - public List chartData = new List() { 10, 2, 5, 6 }; - public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; } ```` ## OnReorder -The `OnReorder` event fires when tiles have been reordered. You can use it to, for example, update the saved [state](slug:tilelayout-state) for your users. +The TileLayout `OnReorder` event fires when the user drags a tile to another position, so that the tile order changes. You can use the event to update the saved [TileLayout state](slug:tilelayout-state). -The `OnReorder` event provides an argument of type `TileLayoutReorderEventArgs`. It exposes two properties: +The `OnReorder` event provides an argument of type `TileLayoutReorderEventArgs`. It exposes an `Id` `string` property that holds the ID of the reordered tile item. -* `Id` (`string`) of the reordered item - ->caption Respond to the OnReorder event +>caption Handle the TileLayout OnReorder event ````RAZOR -@* Handle the OnResized event *@ - + OnReorder="@OnTileLayoutReorder"> - - Regular sized first panel. + + Tile 1 content. - - You can put components in the tiles too. + + Tile 2 content. - + This tile is three rows tall. - - This tile is two rows tall and two columns wide + + This tile is two rows tall and two columns wide. +@if (!string.IsNullOrEmpty(LastReorderedTileId)) +{ +

Last reordered tile: @LastReorderedTileId at @DateTime.Now.ToLongTimeString()

+} + @code{ - async Task OnReorderHandler(TileLayoutReorderEventArgs args) + private string LastReorderedTileId { get; set; } = string.Empty; + + private void OnTileLayoutReorder(TileLayoutReorderEventArgs args) { - Console.WriteLine($"tile {args.Id} reordered, might be a good time to save the state."); + LastReorderedTileId = args.Id; } } ```` ## Next Steps -* [Manage the Tile Layout state](slug:tilelayout-state). +* [Manage the TileLayout State](slug:tilelayout-state). ## See Also