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

Client-side Programming Overview

This article describes how to get a reference to the RadWindow in all possible scenarios and offers useful links for working with the control.

The article contains the following sections:

The Different Contexts

RadWindow is usually used to load an entire page which means this page is placed inside an iframe. The iframe has its own context (i.e., window and document objects) that is independent of the main page context (where the RadWindow is declared and opened).

For the purpose of this article, the page where the RadWindow markup resides will be called Main Page and the page loaded in the RadWindow will be called Content Page.

Browsers create a strong separation between an iframe and the main frame, and you cannot drag, move or display objects and HTML elements out of the Content Page towards the Main Page or vice versa.

It is important to distinguish between these contexts, because the ways to get a reference to the RadWindow object in either of them are different(and are explained below).

It is also important to avoid adding event handlers from one context into the other (e.g., an OnClientClose handler should not be added inside the Content Page). If you need to execute logic in the content page, you can call a function in it from a handler defined in the main page.

Getting a Reference to a RadWindow from the Main Page

The first thing you need to do with a popup is to show it. The Opening Windows article explains the different ways, and one of the easiest is to get a direct reference to the control and show it. Here are a few examples:

Example 1: Get a reference to a RadWindow declared in the markup or in the Windows collection of a RadWindowManager.

<asp:Button ID="Button1" Text="show the dialog" OnClientClick="showDialog(); return false;" runat="server" />
<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1"></telerik:RadWindow>
<script type="text/javascript">
    function showDialog() {
        var wnd = $find("<%= RadWindow1.ClientID%>");
        wnd.show();
    }
</script>

Example 2: Get a reference to a RadWindow in the Windows collection of a RadWindowManager through the RadWindowManager API.

<telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager1">
    <Windows>
        <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1"></telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<asp:Button ID="Button1" Text="open dialog" OnClientClick="openDialog(); return false;" runat="server" />
<script type="text/javascript">
    function openDialog() {
        var wndManager = $find("<%=RadWindowManager1.ClientID%>");
        var wnd = wndManager.open("the-desired-page.aspx", "RadWindow1");
    }
</script>

Getting a Reference to a RadWindow from its Content Page

In many cases you need to get a reference to the RadWindow from the page that you loaded in it(e.g., via its NavigateUrl property, or through the arguments radopen() receives) in order to close the dialog, for example.

To get a reference to the RadWindow client-side object from inside its content page, you need to add the followingJavaScript function to the content page itself. Our code generates the object it accesses if possible (i.e., both pages are from the same domain).

Example 3: Getting a reference to a RadWindow from inside its content page.

<asp:Button ID="Button1" Text="close dialog" OnClientClick="closeDialog(); return false;" runat="server" />
<script type="text/javascript">
    function GetRadWindow() {
        var oWindow = null;
        if (window.radWindow) oWindow = window.radWindow;
        else if (window.frameElement && window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
        return oWindow;
    }

    function closeDialog() {
        var wnd = GetRadWindow();
        wnd.close();
    }
</script>

If you are using DestroyOnClose , add a small timeout around close().

If you need to close the dialog from its server code, you can execute the JavaScript function from the server.

Getting a Reference to a RadWindow from Controls in its ContentTemplate

The ContentTemplate of the RadWindow can be considered as a simple div element. It remains in the same context as the control declaration and to get a reference to it, you need to use the approach from the Getting a Reference to a RadWindow from the Main Page

When user controls are loaded in the ContentTemplate, it is often simplest to define a JavaScript function with a meaningful name that will return the needed reference and place it right next to the RadWindow declaration. When NamingContainers are used,the server code blocks needed to get the proper ClientID of the controls are scoped to the concrete container (e.g., the user control), so defining a function that will return the RadWindow object in the user control itself will require traversing the Controls tree of the page,i.e., the user control would need to know in which page it is loaded. If a function that will return the needed reference exists in the global scope, you only need to know its name and call it from anywhere on the page or user controls.

If you need to use AJAX in the ContentTemplate of a RadWindow, examine the How to Use RadWindow with AJAX help article.

Example 4: Getting a reference to a RadWindow from a user control loaded in its ContentTemplate

<asp:Button ID="Button1" Text="show dialog" OnClientClick="showDialog(); return false;" runat="server" />
<telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindow1">
    <ContentTemplate>
        <uc:SomeControl runat="server" id="SomeControl1"></uc:SomeControl>
    </ContentTemplate>
</telerik:RadWindow>
<script type="text/javascript">
    function getRadWindow1() {
        return $find("<%=RadWindow1.ClientID%>");
    }

    function showDialog() {
        getRadWindow1().show();
    }
</script>
<asp:Button ID="Button1" Text="close dialog" OnClientClick="closeDialog(); return false;" runat="server" />
<script type="text/javascript">
    function closeDialog() {
        getRadWindow1().close();
    }
</script>

Once you know how to get a reference to the control, you can utilize its full potential, for example:

You may also find useful the Common Issues help article.

A lot of the features of the control are showcased in its online demos where you can see it in action.

See Also

In this article