UI for ASP.NET AJAX
UI for ASP.NET AJAX

    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