Window

Controls

Rate this demo

Thank you for your post!

Window - Return Values from a Dialog

This demo contains 1 or more dialog pages. To view them, hover over the dropdown button () in the Example Source Code & Description section

Click the button to open the Travel Planner form in a RadWindow.



 Travel Planner

This example demonstrates a common real-world scenario - opening a dialog from another dialog and ensuring the communication between them and the parent page.

In this particular example, a new RadWindow is opened from within another RadWindow in the context of the parent page. To build the communication between the popups and the parent page, we use RadWindow's client-side API. The following methods and properties are used:
  • BrowserWindow - this property returns a reference to the parent page from which the RadWindow was opened.
  • get_contentFrame() - this method returns a reference to the IFRAME, in which the content page of the RadWindow is displayed. To gain access to the content page itself, you need to use its contentWindow property, e.g.
    get_contentFrame().contentWindow.
  • When the initial RadWindow is closed, the argument from within it is transferred to the parent page in the close() function and is read in the OnClientClose function on the parent page.
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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>
    <title>ASP.NET Window Demo - Return Values from a Dialog</title>
     <style type="text/css">
          .orderText
          {
               font: normal 12px Arial,Verdana;
               margin-top: 6px;
          }
          
          div.RadForm_Black p, div.RadForm_Office2010Black p
          {
               color: black;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <qsf:InformationBox ID="InformationBox1" runat="server">
          <span style="font-size: 12px;">This demo contains 1 or more dialog pages. To view them,
               hover over the dropdown button (<span class="qsfExpandImage">&#9660;</span>) in
               the <em>Example
                Source Code &amp; Description</em> section</span>
     </qsf:InformationBox>
     <script type="text/javascript">
          //<![CDATA[
          function openWin() {
               var oWnd = radopen("Dialog1.aspx", "RadWindow1");
          }

          function OnClientClose(oWnd, args) {
               //get the transferred arguments
               var arg = args.get_argument();
               if (arg) {
                    var cityName = arg.cityName;
                    var seldate = arg.selDate;
                    $get("order").innerHTML = "You chose to fly to <strong>" + cityName + "</strong> on <strong>" + seldate + "</strong>";
               }
          }
          //]]>
     </script>
     <telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false"
          ReloadOnShow="true" runat="server" EnableShadow="true">
          <Windows>
               <telerik:RadWindow ID="RadWindow1" runat="server" Behaviors="Close" OnClientClose="OnClientClose"
                    NavigateUrl="Dialog1.aspx">
               </telerik:RadWindow>
               <telerik:RadWindow ID="RadWindow2" runat="server" Width="650" Height="480" Modal="true"
                    NavigateUrl="Dialog2.aspx">
               </telerik:RadWindow>
          </Windows>
     </telerik:RadWindowManager>
     <div id="offsetElement" style="height: 400px; padding: 8px; background-color: #eee;">
          <p>
               Click the button to open the Travel Planner form in a RadWindow.
          </p>
          <button onclick="openWin(); return false;">
               Choose Destination and date</button>
          <div id="order" class="orderText">
               <!---->
          </div>
          <br />
          <br />
     </div>

    </form>
</body>
</html>