From 3ca6de8fc29735ee64c862812baf72c9efe33702 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Thu, 7 Nov 2024 17:19:38 +0000 Subject: [PATCH 01/10] Added new kb article tilelayout-kb-nested-instances --- .../tilelayout-kb-nested-instances.md | 160 ++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 knowledge-base/tilelayout-kb-nested-instances.md diff --git a/knowledge-base/tilelayout-kb-nested-instances.md b/knowledge-base/tilelayout-kb-nested-instances.md new file mode 100644 index 0000000000..f592130be5 --- /dev/null +++ b/knowledge-base/tilelayout-kb-nested-instances.md @@ -0,0 +1,160 @@ +--- +title: Nested 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 affect 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 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. + +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. + +>caption Enable resize and reorder for onle level of nested tiles + +````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](https://docs.telerik.com/blazor-ui/components/tilelayout/overview) +- [TileLayout Resizable Documentation](https://docs.telerik.com/blazor-ui/components/tilelayout/features#resizable) +- [TileLayout Reorderable Documentation](https://docs.telerik.com/blazor-ui/components/tilelayout/features#reorderable) From dc22e11a4bcb0084b4755e093d82942e21df6e36 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 7 Nov 2024 19:57:44 +0200 Subject: [PATCH 02/10] chore(TileLayout): update article --- ...nces.md => tilelayout-nested-instances.md} | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) rename knowledge-base/{tilelayout-kb-nested-instances.md => tilelayout-nested-instances.md} (82%) diff --git a/knowledge-base/tilelayout-kb-nested-instances.md b/knowledge-base/tilelayout-nested-instances.md similarity index 82% rename from knowledge-base/tilelayout-kb-nested-instances.md rename to knowledge-base/tilelayout-nested-instances.md index f592130be5..d6f535b853 100644 --- a/knowledge-base/tilelayout-kb-nested-instances.md +++ b/knowledge-base/tilelayout-nested-instances.md @@ -31,13 +31,18 @@ This KB article answers the following questions: ## 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 affect the parent component. This behavior occurs because the resize and reorder events propagate through both levels of TileLayout components. +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 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. +Nesting TileLayouts is uncommon, but generally possible if the resizing and reordering are enabled only for one level at a time. It is important to clarify that with the users, so they do not expect they can drag tiles across component instances, which is not possible. -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. +To manage nested TileLyouts with resizing and reordering: ->caption Enable resize and reorder for onle level of nested tiles +1. Bind the `Resizable` and `Reorderable` of both TileLayout instances to different variables, so you can toggle them during runtime. +1. Choose your preferred UI to allow the user enable the resizing and reordering of the specific level of tiles. The example below uses ToggleButtons. +1. Once the 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 will prevent the parent TileLayout from expanding if the user resizes the tiles in the child TileLayout. + +>caption Enable resize and reorder for only level of nested TileLayouts ````CSHTML