Skip to content

Commit 3ca6de8

Browse files
author
KB Bot
committed
Added new kb article tilelayout-kb-nested-instances
1 parent efb1b6a commit 3ca6de8

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed

‎knowledge-base/tilelayout-kb-nested-instances.md‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
title: Nested TileLayout Components with Resizing and Reordering
3+
description: Learn how to nest TileLayout components in a Blazor application and enable the resize and reorder features.
4+
type: how-to
5+
page_title: How to Handle Nested Telerik TileLayouts with Resizing and Reordering
6+
slug: tilelayout-kb-nested-instances
7+
tags: tilelayout, blazor, nested, resize, reorder
8+
res_type: kb
9+
ticketid: 1666719
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>TileLayout for Blazor
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
I have nested TileLayout components and I want both instances to be resizable and reorderable. The problem is that when I enable these features, the TileLayout does not behave well - for example, the reorder in the child component will also reorder the parent component with the same order.
26+
27+
This KB article answers the following questions:
28+
- How can I enable resizing for nested TileLayout components without affecting the parent component?
29+
- What is the best practice for managing nested TileLayout components in Blazor?
30+
- How to prevent nested TileLayout components from resizing or reordering their parent in Blazor?
31+
32+
## Solution
33+
34+
When using two nested [TileLayout](https://docs.telerik.com/blazor-ui/components/tilelayout/overview) components in a Blazor application, resizing or reordering the child component expectedly affect the parent component. This behavior occurs because the resize and reorder events propagate through both levels of TileLayout components.
35+
36+
Nesting TileLayouts is uncommon, but generally possible if tile resizing and reordering are enabled only for one level at a time. It is important to clarify that with the users, so do not expect they can drag tiles across component instances, which is not possible.
37+
38+
To manage nested TileLayout components without unwanted resize and reorder behaviors, enable resizing and reordering only for the innermost TileLayout instance. This approach prevents event propagation issues and enhances user experience by providing a clear and manageable interaction model for nested components.
39+
40+
>caption Enable resize and reorder for onle level of nested tiles
41+
42+
````CSHTML
43+
<style>
44+
.parent-tilelayout .k-tilelayout-item {
45+
overflow: auto;
46+
}
47+
48+
.child-tilelayout-disabled .k-tilelayout-item-header {
49+
pointer-events: none;
50+
}
51+
</style>
52+
53+
<TelerikToggleButton @bind-Selected="@ParentOperationsEnabled" Icon="@SvgIcon.Ungroup" OnClick="@EnableParentConfiguration">Enable parent operations</TelerikToggleButton>
54+
55+
<TelerikTileLayout Columns="2"
56+
Height="500px"
57+
Resizable="@ParentOperationsEnabled"
58+
Reorderable="@ParentOperationsEnabled"
59+
Class="parent-tilelayout">
60+
<TileLayoutItems>
61+
<TileLayoutItem RowSpan="2">
62+
<HeaderTemplate>
63+
<div class="k-hbox" style="justify-content: space-between">
64+
<h3>
65+
Tile 1
66+
</h3>
67+
<span @onclick:stopPropagation="true">
68+
<TelerikToggleButton @bind-Selected="ChildLayout1OperationsEnabled" Icon="@SvgIcon.Ungroup" Title="Delete tile"
69+
OnClick="@(()=>EnableChildConfiguration("Tile 1"))">Enable operations for this tile</TelerikToggleButton>
70+
</span>
71+
</div>
72+
</HeaderTemplate>
73+
<Content>
74+
<TelerikTileLayout Columns="2"
75+
RowHeight="150px"
76+
Resizable="@ChildLayout1OperationsEnabled"
77+
Reorderable="@ChildLayout1OperationsEnabled"
78+
Class="@(ParentOperationsEnabled? "child-tilelayout-disabled" : "")">
79+
<TileLayoutItems>
80+
<TileLayoutItem HeaderText="Tile 1">
81+
<Content>First child tile</Content>
82+
</TileLayoutItem>
83+
<TileLayoutItem HeaderText="Tile 2">
84+
<Content>Second child tile</Content>
85+
</TileLayoutItem>
86+
<TileLayoutItem HeaderText="Tile 3" ColSpan="2">
87+
<Content>Third child tile</Content>
88+
</TileLayoutItem>
89+
</TileLayoutItems>
90+
</TelerikTileLayout>
91+
</Content>
92+
</TileLayoutItem>
93+
<TileLayoutItem RowSpan="2">
94+
<HeaderTemplate>
95+
<div class="k-hbox" style="justify-content: space-between">
96+
<h3>
97+
Tile 2
98+
</h3>
99+
<span @onclick:stopPropagation="true">
100+
<TelerikToggleButton @bind-Selected="ChildLayout2OperationsEnabled" Icon="@SvgIcon.Ungroup" Title="Delete tile"
101+
OnClick="@(()=>EnableChildConfiguration("Tile 2"))">Enable operations for this tile</TelerikToggleButton>
102+
</span>
103+
</div>
104+
</HeaderTemplate>
105+
<Content>
106+
<TelerikTileLayout Columns="2"
107+
RowHeight="150px"
108+
Resizable="@ChildLayout2OperationsEnabled"
109+
Reorderable="@ChildLayout2OperationsEnabled"
110+
Class="@(ParentOperationsEnabled? "child-tilelayout-disabled" : "")">
111+
<TileLayoutItems>
112+
<TileLayoutItem HeaderText="Tile 1">
113+
<Content>First child tile</Content>
114+
</TileLayoutItem>
115+
<TileLayoutItem HeaderText="Tile 2">
116+
<Content>Second child tile</Content>
117+
</TileLayoutItem>
118+
<TileLayoutItem HeaderText="Tile 3" ColSpan="2">
119+
<Content>Third child tile</Content>
120+
</TileLayoutItem>
121+
</TileLayoutItems>
122+
</TelerikTileLayout>
123+
</Content>
124+
</TileLayoutItem>
125+
</TileLayoutItems>
126+
</TelerikTileLayout>
127+
128+
@code{
129+
private bool ParentOperationsEnabled { get; set; } = true;
130+
private bool ChildLayout1OperationsEnabled { get; set; }
131+
private bool ChildLayout2OperationsEnabled { get; set; }
132+
133+
private void EnableParentConfiguration()
134+
{
135+
ParentOperationsEnabled = true;
136+
ChildLayout1OperationsEnabled = false;
137+
ChildLayout2OperationsEnabled = false;
138+
}
139+
140+
private void EnableChildConfiguration(string tileName)
141+
{
142+
switch (tileName)
143+
{
144+
case "Tile 1":
145+
ChildLayout1OperationsEnabled = true;
146+
break;
147+
case "Tile 2":
148+
ChildLayout2OperationsEnabled = true;
149+
break;
150+
}
151+
152+
ParentOperationsEnabled = false;
153+
}
154+
}
155+
````
156+
157+
## See Also
158+
- [TileLayout Overview](https://docs.telerik.com/blazor-ui/components/tilelayout/overview)
159+
- [TileLayout Resizable Documentation](https://docs.telerik.com/blazor-ui/components/tilelayout/features#resizable)
160+
- [TileLayout Reorderable Documentation](https://docs.telerik.com/blazor-ui/components/tilelayout/features#reorderable)

0 commit comments

Comments
 (0)