Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Window / Restriction Zone

  • CSS Globe Members News
  • CSS3.Info
  • W3C Markup Validation
  • cssplay.co.uk
  • The Web Standards Project
  • organic{x}html

  • Setting a restriction zone

    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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.RestrictionZone.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .rmExpandDown
            {
                background: transparent url(Img/RootGroupArrowDown.gif) no-repeat right center !important;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="false" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                //<![CDATA[
                function OnClientNodeClickingTreeview(sender, eventArgs)
                {
                    var oManager = GetRadWindowManager();
                    //get the clicked node
                    var Url = eventArgs.get_node(sender, eventArgs).get_value();
                    //get the active RadWindow
                    var oWnd = GetRadWindowManager().getActiveWindow();
                    //now we need to open a new RadWindow and ensure that
                    //such RadWindow has not been already opened.
                    var windows = oManager.get_windows();
                    for (var i = 0; i < windows.length; i++)
                    {
                        var wnd = windows[i];
                        //check if an already created window has that Url
                        if (wnd.get_navigateUrl() == Url)
                        {
                            //if so - activate that window
                            wnd.setActive(true);
                            return;
                        }
                    }
                    //else open a new window
                    radopen(Url, null);
                }

                function OnClientItemClickingMenu(sender, eventArgs)
                {
                    var menuItem = eventArgs.get_item();

                    //If user clicked on any of the head menu items, do nothing - let the menu open
                    if (menuItem.get_level() == 0) return;

                    //Close the menu
                    sender.close();

                    var oManager = GetRadWindowManager();
                    var oWnd = oManager.getActiveWindow();
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    var val = menuItem.get_value();

                    //evalute the value of the menu. The logic is:
                    //If a RadWindow is opened on the page and the clicked item's value is a RadWindow method - execute that method.
                    //If it is RadWindowManager's method - execute that method
                    //If the value is none of the above, then the value is used to control the treeview
                    if (oWnd && oWnd[val]) oWnd[val]();
                    else if (oManager[val]) oManager[val]();
                    else
                    {
                        ajaxManager.ajaxRequest(val);
                    }
                }
            //]]>
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="RadTreeView1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="1000"
            BackColor="#cccccc" Transparency="50">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadMenu ID="RadMenu1" Skin="Web20" OnClientItemClicking="OnClientItemClickingMenu"
            runat="server" Width="710">
        </telerik:RadMenu>
        <table style="border-collapse: collapse; width: 710px; border: solid 1px #98b7de;
            float: left">
            <tr>
                <td valign="top" style="border: solid 1px #98b7de; height: 500px;">
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="100%" Width="171" OnClientNodeClicking="OnClientNodeClickingTreeview"
                        DataSourceID="XmlDataSource2" DataTextField="text" DataValueField="htmlUrl" />
                </td>
                <td id="zoneID1" style="vertical-align: top; width: 100%;">
                </td>
            </tr>
        </table>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Web20" EnableShadow="true"
            ShowContentDuringLoad="false" RestrictionZoneID="zoneID1">
            <Windows>
                <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Top="10"
                    Left="10" NavigateUrl="http://www.css3.info">
                </telerik:RadWindow>
                <telerik:RadWindow ID="RadWindow2" runat="server" VisibleOnPageLoad="true" Top="50"
                    Left="50" NavigateUrl="http://www.dhtmlgoodies.com">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        <qsf:Footer runat="server" ID="Footer1" />
    <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>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451