New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Restriction Zone

  • Grid Mobile demo
  • Editor Mobile demo
  • Scheduler Mobile demo

In some scenarios it is desireable to have RadWindow confined to a particular area. This is useful when there is a user navigation interface and the windows should not obscure it.

A similar effect can be achieved by using a FRAMESET or IFRAMEs, but in this approach it becomes difficult to synchronize the different page parts. Thus, to ease the creation of user-friendly interfaces, RadWindow provides the RestrictionZoneID property, which restricts window movement (and also maximize, minimize, resize functionality) to a particular area.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
  • Menu.xml
    • Menu.xml
    • TelerikDemos.xml
    • TelerikDocs.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.RestrictionZone.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="RadTreeView1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="1000"
        BackColor="#cccccc" Transparency="50">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container size-wide">
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" CssClass="navMenu" OnClientItemClicking="OnClientItemClickingMenu"
            runat="server" Width="710">
        </telerik:RadMenu>
        <table style="border-collapse: collapse; width: 710px; border: solid 1px #ccc; float: left">
            <tr>
                <td valign="top" style="border: solid 1px #ccc; height: 500px;">
                    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" Height="100%" Width="171" OnClientNodeClicking="OnClientNodeClickingTreeview"
                        DataSourceID="XmlDataSource1" DataTextField="text" DataValueField="htmlUrl">
                    </telerik:RadTreeView>
                </td>
                <td id="zoneID1" style="vertical-align: top; width: 100%;"></td>
            </tr>
        </table>
        <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true"
            ShowContentDuringLoad="false" RestrictionZoneID="zoneID1" Width="450">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Top="10"
                    Left="10" NavigateUrl="https://demos.telerik.com/aspnet-ajax/grid/mobile-examples/overview/default.aspx">
                </telerik:RadWindow>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow2" runat="server" VisibleOnPageLoad="true" Top="50"
                    Left="50" NavigateUrl="https://demos.telerik.com/aspnet-ajax/editor/mobile-examples/overview/default.aspx">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>

        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                //<![CDATA[
                $restrictionZoneDemo.ajaxManagerID = "<%= RadAjaxManager1.ClientID %>";
                //]]>
            </script>
        </telerik:RadCodeBlock>

        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Window/Examples/RestrictionZone/TelerikDemos.xml"
            XPath="/Tree/Node"></asp:XmlDataSource>
        <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/Window/Examples/RestrictionZone/TelerikDocs.xml"
            XPath="/Tree/Node"></asp:XmlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance