Skip to content

Commit 2f1dcf6

Browse files
kendo-botKB Botntachevaikoevska
authored
Added new kb article tilelayout-kb-nested-instances (#2503)
* Added new kb article tilelayout-kb-nested-instances * chore(TileLayout): update article * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * Update knowledge-base/tilelayout-nested-instances.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> --------- Co-authored-by: KB Bot <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]> Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>
1 parent 7cba97f commit 2f1dcf6

File tree

1 file changed

+165
-0
lines changed

1 file changed

+165
-0
lines changed

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

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
title: Nesting 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&mdash;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 affects 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 the resizing and reordering are enabled only for one level at a time. With such an implementation, you need to clarify to your end users that they can't drag tiles across the different component instances.
37+
38+
To manage nested TileLyouts with resizing and reordering:
39+
40+
1. Bind the `Resizable` and `Reorderable` properties of both TileLayout instances to different variables, so you can toggle them during runtime.
41+
1. Choose your preferred UI to allow the end user to enable the resizing and reordering of the specific level of tiles. The example below uses ToggleButtons.
42+
1. After the end user enables the resizing and reordering for one level, programmatically disable the features for the other level.
43+
1. (optional) Use CSS to manage the overflow of the parent TileLayout. This prevents the parent TileLayout from expanding if the user resizes the tiles in the child TileLayout.
44+
45+
>caption Enable resize and reorder for only one level of nested TileLayouts
46+
47+
````CSHTML
48+
<style>
49+
.parent-tilelayout .k-tilelayout-item {
50+
overflow: auto;
51+
}
52+
53+
.child-tilelayout-disabled .k-tilelayout-item-header {
54+
pointer-events: none;
55+
}
56+
</style>
57+
58+
<TelerikToggleButton @bind-Selected="@ParentOperationsEnabled" Icon="@SvgIcon.Ungroup" OnClick="@EnableParentConfiguration">Enable parent operations</TelerikToggleButton>
59+
60+
<TelerikTileLayout Columns="2"
61+
Height="500px"
62+
Resizable="@ParentOperationsEnabled"
63+
Reorderable="@ParentOperationsEnabled"
64+
Class="parent-tilelayout">
65+
<TileLayoutItems>
66+
<TileLayoutItem RowSpan="2">
67+
<HeaderTemplate>
68+
<div class="k-hbox" style="justify-content: space-between">
69+
<h3>
70+
Tile 1
71+
</h3>
72+
<span @onclick:stopPropagation="true">
73+
<TelerikToggleButton @bind-Selected="ChildLayout1OperationsEnabled" Icon="@SvgIcon.Ungroup" Title="Delete tile"
74+
OnClick="@(()=>EnableChildConfiguration("Tile 1"))">Enable operations for this tile</TelerikToggleButton>
75+
</span>
76+
</div>
77+
</HeaderTemplate>
78+
<Content>
79+
<TelerikTileLayout Columns="2"
80+
RowHeight="150px"
81+
Resizable="@ChildLayout1OperationsEnabled"
82+
Reorderable="@ChildLayout1OperationsEnabled"
83+
Class="@(ParentOperationsEnabled? "child-tilelayout-disabled" : "")">
84+
<TileLayoutItems>
85+
<TileLayoutItem HeaderText="Tile 1">
86+
<Content>First child tile</Content>
87+
</TileLayoutItem>
88+
<TileLayoutItem HeaderText="Tile 2">
89+
<Content>Second child tile</Content>
90+
</TileLayoutItem>
91+
<TileLayoutItem HeaderText="Tile 3" ColSpan="2">
92+
<Content>Third child tile</Content>
93+
</TileLayoutItem>
94+
</TileLayoutItems>
95+
</TelerikTileLayout>
96+
</Content>
97+
</TileLayoutItem>
98+
<TileLayoutItem RowSpan="2">
99+
<HeaderTemplate>
100+
<div class="k-hbox" style="justify-content: space-between">
101+
<h3>
102+
Tile 2
103+
</h3>
104+
<span @onclick:stopPropagation="true">
105+
<TelerikToggleButton @bind-Selected="ChildLayout2OperationsEnabled" Icon="@SvgIcon.Ungroup" Title="Delete tile"
106+
OnClick="@(()=>EnableChildConfiguration("Tile 2"))">Enable operations for this tile</TelerikToggleButton>
107+
</span>
108+
</div>
109+
</HeaderTemplate>
110+
<Content>
111+
<TelerikTileLayout Columns="2"
112+
RowHeight="150px"
113+
Resizable="@ChildLayout2OperationsEnabled"
114+
Reorderable="@ChildLayout2OperationsEnabled"
115+
Class="@(ParentOperationsEnabled? "child-tilelayout-disabled" : "")">
116+
<TileLayoutItems>
117+
<TileLayoutItem HeaderText="Tile 1">
118+
<Content>First child tile</Content>
119+
</TileLayoutItem>
120+
<TileLayoutItem HeaderText="Tile 2">
121+
<Content>Second child tile</Content>
122+
</TileLayoutItem>
123+
<TileLayoutItem HeaderText="Tile 3" ColSpan="2">
124+
<Content>Third child tile</Content>
125+
</TileLayoutItem>
126+
</TileLayoutItems>
127+
</TelerikTileLayout>
128+
</Content>
129+
</TileLayoutItem>
130+
</TileLayoutItems>
131+
</TelerikTileLayout>
132+
133+
@code{
134+
private bool ParentOperationsEnabled { get; set; } = true;
135+
private bool ChildLayout1OperationsEnabled { get; set; }
136+
private bool ChildLayout2OperationsEnabled { get; set; }
137+
138+
private void EnableParentConfiguration()
139+
{
140+
ParentOperationsEnabled = true;
141+
ChildLayout1OperationsEnabled = false;
142+
ChildLayout2OperationsEnabled = false;
143+
}
144+
145+
private void EnableChildConfiguration(string tileName)
146+
{
147+
switch (tileName)
148+
{
149+
case "Tile 1":
150+
ChildLayout1OperationsEnabled = true;
151+
break;
152+
case "Tile 2":
153+
ChildLayout2OperationsEnabled = true;
154+
break;
155+
}
156+
157+
ParentOperationsEnabled = false;
158+
}
159+
}
160+
````
161+
162+
## See Also
163+
- [TileLayout Overview]({%slug tilelayout-overview%})
164+
- [TileLayout Reorderable Documentation]({%slug tilelayout-reorder%})
165+
- [TileLayout Resizable Documentation]({%slug tilelayout-resize%})

0 commit comments

Comments
 (0)