asked on

Telerik RadWindow passing parameter

Hi experts,

I'm using the Telerik UI for ASP.NET AJAX RadWindow.
https://demos.telerik.com/aspnet-ajax/window/examples/overview/defaultcs.aspx

I'm using ASP.NET and VB.

I saw this example here for passing a parameter from the Main page to the RadWindow:

Using RadWindow as a Dialog
https://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/using-radwindow-as-a-dialog

I recreated this example and it works fine.

This is the working code:

RadWindow1_MainPage.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="RadWindow1_MainPage.aspx.vb" Inherits="RadWindow1_MainPage" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        // https://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/using-radwindow-as-a-dialog

        // The OnClientShow event handler sets the argument to the dialog being opened
        function clientShow(sender, eventArgs) {
            // When the showRadWindow1 button is clicked the value from the textbox is pass to RadWindow1 as an argument
            var txtInput = document.getElementById("txtInput");
            sender.argument = txtInput.value;
        }
        // The OnClientClose event handler receives the result of the dialog and responds
        function clientClose(sender, args) {
            if (args.get_argument() != null) {
                alert("'" + sender.get_name() + "'" + " was closed and returned the following argument: '" + args.get_argument() + "'");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

            <telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" runat="server" AutoSize="True" Modal="True" NavigateUrl="RadWindow1_Dialog.aspx"
                OpenerElementID="showDialog" OnClientClose="clientClose" OnClientShow="clientShow" ReloadOnShow="true">
            </telerik:RadWindow>
            Type initial value here:
            <br />
            <asp:TextBox ID="txtInput" runat="server" /><br />
            <asp:Button ID="showDialog" Text="Show Dialog" runat="server" />
        </div>
    </form>
</body>
</html>

Open in new window

RadWindow1_MainPage.aspx.vb

Partial Class RadWindow1_MainPage
    Inherits System.Web.UI.Page

End Class

Open in new window

RadWindow1_Dialog.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="RadWindow1_Dialog.aspx.vb" Inherits="RadWindow1_Dialog" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>RadWindow1</title>
    <style type="text/css">
        .Text1 {font-family: Arial; font-weight: bold; font-size: 14px; color: #0000ff;}
    </style>
    <script type="text/javascript">       

        // To get a reference to the RadWindow object that hosts the content, add the following script to the dialog page
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.radWindow;
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            return oWindow;
        }
        
        // ***** function used to get the paramaeter from the parent window on RadWindow page load *****
        // Use the ASP.NET AJAX pageLoad() client function to read the argument and use it to initialize the dialog
        //this function is automatically called when all ASP.NET AJAX controls are fully rendered on the page
        //and receives the argument passed from the parent page
        //IMPORTANT: for pageLoad() to work, you need to have asp:scriptmanager or RadScriptManager controls on the page.
        //Setting ReloadOnShow for the RadWindow to true ensures the page will be loaded freshly and that pageLoad() will be called
        function pageLoad() {
            txtInput = document.getElementById('txtUserInput');
            var currentWindow = GetRadWindow();
            txtInput.value = currentWindow.argument;
        }
        // ***** function used to get the paramaeter from the parent window on RadWindow page load *****

        // ***** functions used when closing the RadWindow *****
        // The Cancel button closes the containing window like this
        //return no argument and close the RadWindow
        function cancelAndClose() {
            var oWindow = GetRadWindow();
            oWindow.close(null);
        }
        // The Close With Argument button invokes the OnClientClose function and provides it with a return value like this
        //Close the dialog and return the argument to the OnClientClose event handler
        function returnArg() {
            var oWnd = GetRadWindow();
            oWnd.close(txtInput.value);
        }
        // ***** functions used when closing the RadWindow *****
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <table id="TableRadWindow">
                <tr>
                    <td>Type initial value here:</td>
                    <td>
                        <asp:TextBox ID="txtUserInput" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button1" runat="server" Text="Close With Argument" OnClientClick="returnArg(); return false;" /></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Button2" runat="server" Text="Cancel" OnClientClick="cancelAndClose(); return false;" /></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Open in new window

RadWindow1_DialogPage.aspx.vb

Partial Class RadWindow1_Dialog
    Inherits System.Web.UI.Page

End Class

Open in new window

So when I run this page RadWindow1_MainPage.aspx it looks like this:

now if I type something in the textbox and click the Show Dialog button the value I typed gets passed as an argument to the RadWindow and the value is displayed in another textbox in the radwindow like this:

Now if i type something else in the textbox in the popup window and then click Close with Argument like this:

After I click the Close With Argument button, the textbox value in the popup will then get passed as an argument to the Main Page and display it in an Alert message like this:

My Question

The above example works fine but here is my question.

In the this dialog page RadWindow1_Dialog.aspx

There is this JavaScript pageLoad funciton that looks like this.
I'm not sure I understand what's going on in this function.

What is actually going on in these 3 lines?

// Use the ASP.NET AJAX pageLoad() client function to read the argument and use it to initialize the dialog
//this function is automatically called when all ASP.NET AJAX controls are fully rendered on the page
//and receives the argument passed from the parent page
//IMPORTANT: for pageLoad() to work, you need to have asp:scriptmanager or RadScriptManager controls on the page.
//Setting ReloadOnShow for the RadWindow to true ensures the page will be loaded freshly and that pageLoad() will be called
function pageLoad() {
txtInput = document.getElementById('txtUserInput');
var currentWindow = GetRadWindow();
txtInput.value = currentWindow.argument;
}

The textbox in the Dialog page is called ID="txtInput"
The textbox in the Dialog page is called ID="txtUserInput"
I don't understand why the value of the textbox in the popup is being stored in a variable?
Why can't I just get the argument and store it in a hidden field on the Dialog page?

How do i revise my example to get the argument that was passed from the main page and save it in a Hidden field called HiddenField1 in the Dialog page?

See In the Dialog page I'm going to have a DataGrid and on the VB server side page load event I'm going to get the value in HiddenField1 to filter the DataGrid by.

Or

Is there a better way to set it up to so I can filter my DataGrid by the argument that was sent from the Main Page?

leakim971

I don't understand why the value of the textbox in the popup is being stored in a variable?

See in bold :
txtInput = document.getElementById('txtUserInput');
var currentWindow = GetRadWindow();
txtInput.value = currentWindow.argument;

maqskywalker

ASKER

Leakim,

Yes I saw those 3 lines.

What I meant to say is, what are those 3 lines in that function doing?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

maqskywalker

ASKER

thanks

leakim971

I think it would be more clear to have :
txtUserInput= document.getElementById('txtUserInput');
var currentWindow = GetRadWindow();
txtUserInput.value = currentWindow.argument;
instead (currently) :
txtInput = document.getElementById('txtUserInput');
var currentWindow = GetRadWindow();
txtInput.value = currentWindow.argument;