Skip to content

Commit 389844f

Browse files
github-actions[bot]dimodi
github-actions[bot]
and
dimodi
authored
docs(TileLayout): Revamp Events article (#3153)
Co-authored-by: Dimo Dimov <[email protected]>
1 parent d0e45dd commit 389844f

File tree

1 file changed

+54
-52
lines changed

1 file changed

+54
-52
lines changed

‎components/tilelayout/events.md‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,132 +3,134 @@ title: Events
33
page_title: TileLayout - Events
44
description: Events of the TileLayout for Blazor.
55
slug: tilelayout-events
6-
tags: telerik,blazor,tile,layout,dashboard,events
6+
tags: telerik, blazor, tilelayout, events
77
published: True
88
position: 30
99
---
1010

1111
# TileLayout Events
1212

13-
This article explains the events available in the Telerik TileLayout for Blazor:
13+
This article explains the available events in the Telerik TileLayout for Blazor:
1414

1515
* [OnResize](#onresize)
1616
* [OnReorder](#onreorder)
1717

1818
## OnResize
1919

20-
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.
20+
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.
2121

22-
The `OnResize` event provides an argument of type `TileLayoutResizeEventArgs`. It exposes two properties:
22+
The `OnResize` event provides an argument of type `TileLayoutResizeEventArgs`. It exposes an `Id` `string` property that holds the ID of the resized tile item.
2323

24-
* `Id` (`string`) of the resized item
25-
26-
>caption Respond to the Resize event and adjust components in the tile
24+
>caption Handle the TileLayout OnResize event
2725
2826
````RAZOR
29-
@* Respond to a tile resizing to resize its contents, if needed *@
30-
3127
<TelerikTileLayout Columns="4"
3228
Resizable="true"
33-
OnResize="@OnResizeHandler">
29+
OnResize="@OnTileLayoutResize">
3430
<TileLayoutItems>
35-
<TileLayoutItem HeaderText="Resize me" RowSpan="2" ColSpan="2" Id="chart-tile">
31+
<TileLayoutItem HeaderText="Resize Me" Id="chart-tile" RowSpan="2" ColSpan="2">
3632
<Content>
37-
<TelerikChart @ref="@ChartRef" Width="100%" Height="100%">
33+
<TelerikChart @ref="@ChartRef" Height="100%">
3834
<ChartSeriesItems>
39-
<ChartSeries Type="@ChartSeriesType.Line" Name="Product 1" Data="@chartData">
40-
</ChartSeries>
35+
<ChartSeries Type="@ChartSeriesType.Line" Data="@ChartData" />
4136
</ChartSeriesItems>
4237
4338
<ChartCategoryAxes>
44-
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
39+
<ChartCategoryAxis Categories="@ChartCategories"></ChartCategoryAxis>
4540
</ChartCategoryAxes>
4641
47-
<ChartTitle Text="Quarterly revenue per product"></ChartTitle>
48-
49-
<ChartLegend Position="@ChartLegendPosition.Right">
50-
</ChartLegend>
42+
<ChartTitle Text="Quarterly Revenue"></ChartTitle>
5143
</TelerikChart>
5244
</Content>
5345
</TileLayoutItem>
54-
<TileLayoutItem HeaderText="Resize me too" RowSpan="2" Id="text-tile">
46+
<TileLayoutItem HeaderText="Resize Me Too" Id="text-tile" RowSpan="2">
5547
<Content>
56-
<div style="width: 100%; height: 100%; background: yellow; overflow: auto;">
57-
Elements whose dimensions are set as percentage of their parent
58-
and can resize based on that may not require explicit code to handle
59-
resizing of the tile layout.
48+
<div style="width: 100%; height: 100%; background: #fed; overflow: auto;">
49+
Tile children with percentage heights may not require
50+
explicit code to handle TileLayout resizing.
6051
</div>
6152
</Content>
6253
</TileLayoutItem>
63-
<TileLayoutItem HeaderText="Panel 3" ColSpan="2" Id="tile3">
64-
<Content>Panel 3.</Content>
54+
<TileLayoutItem HeaderText="Panel 3" Id="tile3" ColSpan="2">
55+
<Content>Tile 3.</Content>
6556
</TileLayoutItem>
6657
<TileLayoutItem HeaderText="Panel 4" Id="tile4">
67-
<Content>Panel 4.</Content>
58+
<Content>Tile 4.</Content>
6859
</TileLayoutItem>
6960
</TileLayoutItems>
7061
</TelerikTileLayout>
7162
63+
@if (!string.IsNullOrEmpty(LastResizedTileId))
64+
{
65+
<p>Last resized tile: <code>@LastResizedTileId</code> at <strong>@DateTime.Now.ToLongTimeString()</strong></p>
66+
}
67+
7268
@code {
73-
TelerikChart ChartRef { get; set; }
74-
void OnResizeHandler(TileLayoutResizeEventArgs args)
69+
private TelerikChart? ChartRef { get; set; }
70+
private List<object> ChartData = new List<object>() { 10, 2, 5, 6 };
71+
private string[] ChartCategories = new string[] { "Q1", "Q2", "Q3", "Q4" };
72+
73+
private string LastResizedTileId { get; set; } = string.Empty;
74+
75+
private void OnTileLayoutResize(TileLayoutResizeEventArgs args)
7576
{
76-
Console.WriteLine($"tile {args.Id} resized");
77+
LastResizedTileId = args.Id;
78+
7779
if (args.Id == "chart-tile")
7880
{
79-
ChartRef.Refresh();
81+
ChartRef?.Refresh();
8082
}
8183
}
82-
83-
public List<object> chartData = new List<object>() { 10, 2, 5, 6 };
84-
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
8584
}
8685
````
8786

8887

8988
## OnReorder
9089

91-
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.
90+
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).
9291

93-
The `OnReorder` event provides an argument of type `TileLayoutReorderEventArgs`. It exposes two properties:
92+
The `OnReorder` event provides an argument of type `TileLayoutReorderEventArgs`. It exposes an `Id` `string` property that holds the ID of the reordered tile item.
9493

95-
* `Id` (`string`) of the reordered item
96-
97-
>caption Respond to the OnReorder event
94+
>caption Handle the TileLayout OnReorder event
9895
9996
````RAZOR
100-
@* Handle the OnResized event *@
101-
10297
<TelerikTileLayout Columns="3"
10398
Reorderable="true"
104-
OnReorder="@OnReorderHandler">
99+
OnReorder="@OnTileLayoutReorder">
105100
<TileLayoutItems>
106-
<TileLayoutItem HeaderText="Panel 1">
107-
<Content>Regular sized first panel.</Content>
101+
<TileLayoutItem HeaderText="Tile 1" Id="tile1">
102+
<Content>Tile 1 content.</Content>
108103
</TileLayoutItem>
109-
<TileLayoutItem HeaderText="Panel 2">
110-
<Content>You can put components in the tiles too.</Content>
104+
<TileLayoutItem HeaderText="Tile 2" Id="tile2">
105+
<Content>Tile 2 content.</Content>
111106
</TileLayoutItem>
112-
<TileLayoutItem HeaderText="Panel 3" RowSpan="3">
107+
<TileLayoutItem HeaderText="Tile 3" Id="tile3" RowSpan="3">
113108
<Content>This tile is three rows tall.</Content>
114109
</TileLayoutItem>
115-
<TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
116-
<Content>This tile is two rows tall and two columns wide</Content>
110+
<TileLayoutItem HeaderText="Tile 4" Id="tile4" RowSpan="2" ColSpan="2">
111+
<Content>This tile is two rows tall and two columns wide.</Content>
117112
</TileLayoutItem>
118113
</TileLayoutItems>
119114
</TelerikTileLayout>
120115
116+
@if (!string.IsNullOrEmpty(LastReorderedTileId))
117+
{
118+
<p>Last reordered tile: <code>@LastReorderedTileId</code> at <strong>@DateTime.Now.ToLongTimeString()</strong></p>
119+
}
120+
121121
@code{
122-
async Task OnReorderHandler(TileLayoutReorderEventArgs args)
122+
private string LastReorderedTileId { get; set; } = string.Empty;
123+
124+
private void OnTileLayoutReorder(TileLayoutReorderEventArgs args)
123125
{
124-
Console.WriteLine($"tile {args.Id} reordered, might be a good time to save the state.");
126+
LastReorderedTileId = args.Id;
125127
}
126128
}
127129
````
128130

129131
## Next Steps
130132

131-
* [Manage the Tile Layout state](slug:tilelayout-state).
133+
* [Manage the TileLayout State](slug:tilelayout-state).
132134

133135

134136
## See Also

0 commit comments

Comments
 (0)