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

    Opener and Offset Elements

    Sky.jpg

    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.

    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.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.OpenAndPosition.DefaultCS" %>
     
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <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:RadFormDecorator RenderMode="Lightweight" ID="theFormDecorator" runat="server" DecoratedControls="Buttons" />
        <div class="demo-container">
            <div class="btnContainer">
                <asp:Button ID="SofiaBtn" runat="server" Text="Sofia" />
                <button id="LondonBtn">London</button>
                <button id="AthensBtn">Athens</button>
                <img style="display: block; margin-top: 8px;" id="OffsetImage" src="images/Sky.jpg"
                     alt="Sky.jpg" />
            </div>
            <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" Behaviors="Close" runat="server"
                                      OffsetElementID="OffsetImage" Width="190px" Height="380px">
                <Windows>
                    <%-- RadWindow1's OpenerElementID is set in codebehind --%>
                    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" Title="Sofia" NavigateUrl="https://weather.com/weather/today/l/BUXX0005:1:BU"
                                       runat="server" ShowContentDuringLoad="false">
                    </telerik:RadWindow>
                    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow2" Title="London" Left="190px" OpenerElementID="LondonBtn"
                                       NavigateUrl="https://weather.com/weather/today/l/UKXX0085:1:UK" runat="server" ShowContentDuringLoad="false">
                    </telerik:RadWindow>
                    <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow3" Title="Athens" Left="380px" OpenerElementID="AthensBtn"
                                       NavigateUrl="https://weather.com/weather/today/l/GRXX0004:1:GR" runat="server" ShowContentDuringLoad="false">
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance