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 / Using Opener and Offset Elements

In this demo, the buttons are decorated with RadFormDecorator and are used as opener elements for the 3 RadWindows.
All RadWindows are using the image as an offset element and their position is tuned with the Left property.
      Sky.jpg

  • Using OpenerElementID and OffsetElementID

    By using the OpenerElementID property it is possible to specify the id of an HTML element that, when clicked, will automatically open the corresponding RadWindow object. The opener can be any element on the page that has an ID attribute - the property expect a ClientID, so if you are setting it to a server element, you need to use its ClientID and set it in codebehind:
    RadWindow1.OpenerElementID = SofiaBtn.ClientID;


    Important: Note that if you set this property to a postback element like asp:Button control, the server-side click event of that element will not fire. Thus we recommend using OpenerElementID in simple scenarios only. OpenerElementID is not suitable for databinding scenarios. For example if you have a standard asp:Repeater control or RadGrid where you need to open RadWindows by clicking some elements in the columns, you will have to declare number of RadWindows equal to the number of the opener elements in the grid. In such scenarios it is recommended to use RadWindow's client-side or server-side API.

    You can use the OffsetElementID property for fine-grained control over the position of a window relative to the rest of the page element flow. This allows for flexible declarative relative positioning that is independent of the screen-size and automatically adjusts to the changes in the page layout. The property should specify the id of an HTML element, whose top left corner will be used by the window object to positions itself relatively. The property expect a ClientID, so if you are setting it to a server element, you need to use its ClientID:
    RadWindow1.OffsetElementID = OffsetElement.ClientID;


    The offset can be additionally tuned using the Top and Left properties (to specify offsets in pixels). When OffsetElementID is specified, Top and Left are calculated towards that element's top left corner. If OffsetElementID is not specified, Top and Left are calculated towards the page's top left corner. Top and Left can be used along with the RestrictionZoneID property as well. If the RestrictionZoneID property is set, Top and Left will be calculated towards the top left corner of the restriction zone.

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.OpenAndPosition.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">
        @media screen and (min-width:1px)
        {
         #LondonBtn,
         #AthensBtn
         {
         display: block;
         float: left;
         }
        }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
           <telerik:RadFormDecorator Visible="true" ID="RadFormDecorator1" runat="server" />
           <qsf:InformationBox ID="InformationBox1" runat="server">
                       In this demo, the buttons are decorated with <strong>RadFormDecorator</strong>
                and are used as opener elements for the 3 <strong>RadWindows</strong>.<br /> All <strong>RadWindows</strong>
                are using the image as an offset element and their position is tuned with the <strong>
                    Left</strong> property.
                </qsf:InformationBox>
           <div style="margin:auto; width:575px;">
            <asp:Button ID="SofiaBtn" runat="server" Style="width: 179px;" Text="Sofia">
                </asp:Button>&nbsp;&nbsp;
            <button id="LondonBtn" style="width: 179px;">
                London</button>&nbsp;&nbsp;
            <button id="AthensBtn" style="width: 179px;">
                Athens</button>
            <img style="display:block; margin-top: 8px;" id="OffsetImage" src="./Img/Sky.jpg" alt="Sky.jpg"/>
            </div>
        
        <telerik:RadWindowManager ID="RadWindowManager1" Behaviors="Close" runat="server"
                OffsetElementID="OffsetImage" Width="190px" Height="380px">
                <Windows>
                    <%-- RadWindow1's OpenerElementID is set in codebehind --%>
                    <telerik:RadWindow
                        ID="RadWindow1"
                        Title="Sofia"
                        NavigateUrl="http://wap.gomobi.com.ua/us/weather.php?c_id=100&t_id=2870" runat="server">
                    </telerik:RadWindow>
                    <telerik:RadWindow
                        ID="RadWindow2"
                        Title="London"
                        Left="190px"
                        OpenerElementID="LondonBtn"
                        NavigateUrl="http://wap.gomobi.com.ua/us/weather.php?c_id=826&t_id=8750"
                        runat="server">
                    </telerik:RadWindow>
                    <telerik:RadWindow
                        ID="RadWindow3"
                        Title="Athens"
                        Left="380px"
                        OpenerElementID="AthensBtn"
                        NavigateUrl="http://wap.gomobi.com.ua/us/weather.php?c_id=300&t_id=100"
                        runat="server">
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
            <qsf:Footer runat="server" ID="Footer1" />
        </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