diff --git a/knowledge-base/tilelayout-nested-instances.md b/knowledge-base/tilelayout-nested-instances.md new file mode 100644 index 0000000000..dcfa3bfff5 --- /dev/null +++ b/knowledge-base/tilelayout-nested-instances.md @@ -0,0 +1,165 @@ +--- +title: Nesting TileLayout Components with Resizing and Reordering +description: Learn how to nest TileLayout components in a Blazor application and enable the resize and reorder features. +type: how-to +page_title: How to Handle Nested Telerik TileLayouts with Resizing and Reordering +slug: tilelayout-kb-nested-instances +tags: tilelayout, blazor, nested, resize, reorder +res_type: kb +ticketid: 1666719 +--- + +## Environment + + + + + + + +
ProductTileLayout for Blazor +
+ +## Description + +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. + +This KB article answers the following questions: +- How can I enable resizing for nested TileLayout components without affecting the parent component? +- What is the best practice for managing nested TileLayout components in Blazor? +- How to prevent nested TileLayout components from resizing or reordering their parent in Blazor? + +## Solution + +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. + +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. + +To manage nested TileLyouts with resizing and reordering: + +1. Bind the `Resizable` and `Reorderable` properties of both TileLayout instances to different variables, so you can toggle them during runtime. +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. +1. After the end user enables the resizing and reordering for one level, programmatically disable the features for the other level. +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. + +>caption Enable resize and reorder for only one level of nested TileLayouts + +````CSHTML + + +Enable parent operations + + + + + +
+

+ Tile 1 +

+ + Enable operations for this tile + +
+ + + + + + First child tile + + + Second child tile + + + Third child tile + + + + + + + +
+

+ Tile 2 +

+ + Enable operations for this tile + +
+ + + + + + First child tile + + + Second child tile + + + Third child tile + + + + + + + + +@code{ + private bool ParentOperationsEnabled { get; set; } = true; + private bool ChildLayout1OperationsEnabled { get; set; } + private bool ChildLayout2OperationsEnabled { get; set; } + + private void EnableParentConfiguration() + { + ParentOperationsEnabled = true; + ChildLayout1OperationsEnabled = false; + ChildLayout2OperationsEnabled = false; + } + + private void EnableChildConfiguration(string tileName) + { + switch (tileName) + { + case "Tile 1": + ChildLayout1OperationsEnabled = true; + break; + case "Tile 2": + ChildLayout2OperationsEnabled = true; + break; + } + + ParentOperationsEnabled = false; + } +} +```` + +## See Also +- [TileLayout Overview]({%slug tilelayout-overview%}) +- [TileLayout Reorderable Documentation]({%slug tilelayout-reorder%}) +- [TileLayout Resizable Documentation]({%slug tilelayout-resize%})