Window - Restriction Zone

  • CSS Globe Members News
  • CSS3.Info
  • W3C Markup Validation
  • cssplay.co.uk
  • The Web Standards Project
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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
  • BlogsCSSXHTML.xml
    • BlogsCSSXHTML.xml
    • BlogsJavaScript.xml
    • Menu.xml
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.RestrictionZone.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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="XmlDataSource2" 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">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Top="10"
                    Left="10" NavigateUrl="http://validator.w3.org">
                </telerik:RadWindow>
                <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow2" runat="server" VisibleOnPageLoad="true" Top="50"
                    Left="50" NavigateUrl="http://www.dhtmlgoodies.com">
                </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/BlogsJavaScript.xml"
            XPath="/Tree/Node"></asp:XmlDataSource>
        <asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/Window/Examples/RestrictionZone/BlogsCSSXHTML.xml"
            XPath="/Tree/Node"></asp:XmlDataSource>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?