From 4c65d4c9fefe43c7237d1b09958676b331f5a486 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:13:56 +0300
Subject: [PATCH] Added new kb article contain-radwindow-within-element (#530)

Co-authored-by: KB Bot <kb-bot@telerik.com>
---
 .../contain-radwindow-within-element.md       | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 knowledge-base/contain-radwindow-within-element.md

diff --git a/knowledge-base/contain-radwindow-within-element.md b/knowledge-base/contain-radwindow-within-element.md
new file mode 100644
index 000000000..e5462d03d
--- /dev/null
+++ b/knowledge-base/contain-radwindow-within-element.md
@@ -0,0 +1,47 @@
+---
+title: Containing a RadWindow within an Element
+description: Learn how to contain a RadWindow within a specific element using the RestrictionZoneID property.
+type: how-to
+page_title: How to Contain a RadWindow within an Element
+slug: contain-radwindow-within-element
+tags: radwindow, asp.net ajax, containment, restriction zone
+res_type: kb
+---
+## Environment
+| Property | Value |
+| --- | --- |
+| Product | RadWindow for ASP.NET AJAX |
+| Version | 2024.1.131 |
+
+## Description
+I would like to know how to contain a RadWindow within a specific element so that the window cannot leave that area. I want to achieve the same behavior as 'KeepInScreenBounds' but for an element, not the screen.
+
+## Solution
+To achieve this behavior, you can use the `RestrictionZoneID` property of the RadWindow. This property allows you to specify the ID of an HTML element within which the RadWindow will be constrained. Here's how you can set it up:
+
+1. Create a container element, such as a `<div>`, with the desired dimensions and a unique ID:
+```html
+<div id="radWindowContainer" style="width: 500px; height: 500px; border: 1px solid #000;">
+    <!-- Your container element -->
+</div>
+```
+
+2. Use the `RestrictionZoneID` property of the RadWindow to specify the ID of the container element:
+```html
+<telerik:RadWindowManager ID="RadWindowManager1" runat="server">
+    <Windows>
+        <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="default2.aspx" Title="My Window" VisibleOnPageLoad="true" VisibleStatusbar="false"
+            RestrictionZoneID="radWindowContainer" Width="300" Height="200">
+        </telerik:RadWindow>
+    </Windows>
+</telerik:RadWindowManager>
+```
+
+In this setup, the `radWindowContainer` `<div>` acts as the boundary for the RadWindow. The `RestrictionZoneID` property of the RadWindow is set to the ID of the container element (`radWindowContainer`), ensuring that the window stays within the confines of this div.
+
+Now, the RadWindow will be contained within the specified element and cannot leave that area, providing the functionality you're looking for.
+
+## Notes
+- Make sure to adjust the dimensions and styles of the container element (`radWindowContainer`) to fit your specific requirements.
+- The `RestrictionZoneID` property can only be used with elements that have a defined size, such as a `<div>` with a specified width and height.
+