Close RadWindow from server side button click event ?

[Aravind]

Hi
 How to close rad window from server side click event ?.From main page button click event i open Rad Window ,and in that i use three text boxes,if all text boxes having value ,it will store in database and close that rad window,if any one text box is empty rad window not close and show the error msg.

My code is :

In Client Side Code:

   function CloseAndRedirect(sender, args) {
            GetRadWindow().BrowserWindow.location.href = 'Default1.aspx';        //Redirect to new url 
            GetRadWindow().close();       //closes the window       
        }

        function GetRadWindow()   //Get reference to window    
        {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.radWindow;
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            return oWindow;
        }

Server Side Code :

 Protected Sub btnSendMail_Click(sender As Object, e As EventArgs) Handles btnSendMail.Click
             If (txtName.Text = "" or txtcompany.Text="" or txtphone.Text="" ) Then

                      ShowMessage("enter all values")

            Else
             'Dim script As String = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(CloseAndRedirect);</script>"
            'ClientScript.RegisterStartupScript(Me.GetType(), "Close", script)

            Dim script As String = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(CloseAndRedirect());</script>"
            RadScriptManager.RegisterStartupScript(Me, Me.GetType(), "CloseAndRedirect()", script, False)

    End Sub

I try both in else block ,but both not work.it show error like "0x800a1391 - Microsoft JScript runtime error: 'Sys' is undefined".

My need is close the rad window when  server side button click event in and stay in main page

Pls Reply asap.......
    Regards
        Aravind

[Shinu]

Hi Aravind,

Please have a look into the following full code I tried which worked fine at my end. Here is the mark-up of the main page from where I am opening a RadWindow.

ASPX:

<telerik:RadWindow ID="RadWindow1" runat="server" Width="350px" Height="350px" NavigateUrl="~/CPage.aspx">
</telerik:RadWindow>
<telerik:RadButton ID="RadButton1" runat="server" Text="Open RadWindow" AutoPostBack="false"
    OnClientClicked="openRadWindow">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function openRadWindow(sender, args) {
        var radwindow = $find('<%=RadWindow1.ClientID %>');
        radwindow.show();
    }
</script>

Here is the mark-up and C# of the page I am opening inside the RadWindow.

ASPX:

<div style="padding: 15px 15px 20px 25px;">
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <br />
    <telerik:RadTextBox ID="RadTextBox2" runat="server">
    </telerik:RadTextBox>
    <br />
    <telerik:RadTextBox ID="RadTextBox3" runat="server">
    </telerik:RadTextBox>
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClientClicking="OnClientClicking"
        OnClick="RadButton1_Click">
    </telerik:RadButton>
</div>

JavaScript:

<script type="text/javascript">
    function OnClientClicking(sender, args) {
        var textboxvalue1 = $find('<%=RadTextBox1.ClientID %>').get_value();
        var textboxvalue2 = $find('<%=RadTextBox2.ClientID %>').get_value();
        var textboxvalue3 = $find('<%=RadTextBox3.ClientID %>').get_value();
        if (textboxvalue1.length == 0 || textboxvalue2.length == 0 || textboxvalue3.length == 0) {
            args.set_cancel(true);
            alert("Your Error Message");
        }
    }
    function closeWin() {
        GetRadWindow().BrowserWindow.location.href = 'Default2.aspx';
        GetRadWindow().close();
    }
    function GetRadWindow() {
        var oWindow = null; if (window.radWindow)
            oWindow = window.radWindow; else if (window.frameElement.radWindow)
            oWindow = window.frameElement.radWindow; return oWindow;
    }
</script>

C#:

protected void RadButton1_Click(object sender, EventArgs e)
{
    //Your Code to Write Value to DataBase;

    //Closing the RadWindow.
    string script = "function f(){closeWin(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
}

Thanks,
Shinu.

[Sam]

Hello Shinu,

I get error from Chrome developer tools says:

Uncaught TypeError: Cannot call method 'close' of null

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function OpenWindow(sender, eventArgs) {
                window.radopen(null, "RadWindow1").maximize();
            }            
            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 CloseModal() {
                // GetRadWindow().close();
                setTimeout(function () {
                    GetRadWindow().close();
                }, 0);
            }
            
        </script>
    </telerik:RadCodeBlock>

and code behind to call the CloseModal() function

protected void RadButton1_Click(object sender, EventArgs e)
       {
           string script = "function f(){CloseModal(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
           ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
       }

[Marin Bratanov]

Hello Sam,

This way of getting a reference to the RadWindow (the GetRadWindow() function) can be used only from inside its content page. Otherwise it will return null and you will get such an error. Thus, I suspect that you are either using the ContentTemplate, or trying to get the reference from outside of the dialog. In both cases you will usually need to use the $find() function. You can see this in action here: http://demos.telerik.com/aspnet-ajax/window/examples/contenttemplatevsnavigateurl/defaultcs.aspx.


Regards,
Marin Bratanov
Telerik

[Sam]

Hi Marin,

Your guess is correct.  I used RadWindow ContentTemplate

<telerik:RadWindowManager runat="server" ID="RadWindowManager1" Modal="true" EnableShadow="true"
        Behaviors="Close,Resize,Move,Maximize" VisibleOnPageLoad="false" EnableViewState="false">
        <Windows>
<telerik:RadWindow runat="server" ID="RadWindow1" ShowContentDuringLoad="false">
                <ContentTemplate>
                    <asp:Panel runat="server" ID="pnlHotel">
                        <!-- content -->
                    </asp:Panel>
                </ContentTemplate>
            </telerik:RadWindow>
</Windows>
    </telerik:RadWindowManager>

protected void RadButton1_Click(object sender, EventArgs e)
        {
            string script = "function f(){CloseModal(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
        }

To Open RadWindow ContentTemplate

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function OpenWindow(sender, eventArgs) {
                window.radopen(null, "RadWindow1").maximize();
            }
 </script>
    </telerik:RadCodeBlock>

To Close RadWindow ContentTemplate

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock2">
        <script type="text/javascript">
            function CloseModal() {
                // GetRadWindow().close();
                $find("<%=RadWindow1.ClientID%>").close();
            }
        </script>
    </telerik:RadCodeBlock>

Is there a way to use one CloseModal() function to close every RadWindow by pass in the ClientID ? This way I have to create each CloseModal() function for each RadWindow

And I still get error: Uncaught TypeError: Cannot call method 'close' of null

Please help

Thanks,
Sam

[Princy]

Hi Sam,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<asp:Button ID="Button3" Text="open the window" runat="server" OnClientClick="openWinContentTemplate(); return false;">
</asp:Button>
<br />
<telerik:RadWindow runat="server" ID="RadWindow_ContentTemplate" RestrictionZoneID="ContentTemplateZone"
    Modal="true">
    <ContentTemplate>
        <asp:Button ID="Button1" Text="send value and close" runat="server" OnClientClick="populateValue(); return false;">
        </asp:Button>
    </ContentTemplate>
</telerik:RadWindow>

JavaScript:

<script type="text/javascript">
    function openWinContentTemplate() {
        $find("<%=RadWindow_ContentTemplate.ClientID %>").show();
    }
    function populateValue() {
        $find("<%=RadWindow_ContentTemplate.ClientID%>").close();
    }
</script>

Thanks,
Princy

[Sam]

Hi Princy,

This works fine, but my scenario has multiple RadWindow within RadWindowManager.  I have to create each javascript function for open/close.  Can it be re-written to one open/close function to open/close RadWindow?

Thanks for your help
-Sam

[Shinu]

Hi Sam,

Please have a look into the following code snippet to achieve your scenario.

C#:

protected void RadButton1_Click(object sender, EventArgs e)
{
    //pass the ClientID of the RadWindow to open
    string script = "function f(){Open('"+RadWindow1.ClientID+"'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
}
protected void RadButton2_Click(object sender, EventArgs e)
{
    //pass the ClientID of the RadWindow to close
    string script = "function f(){Close('" + RadWindow1.ClientID + "'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
}

JavaScript:

<script type="text/javascript">
    function Open(win) {
        var window = document.getElementById(win);
        window.control.Show();
    }
    function Close(win) {
        var window = document.getElementById(win);
        window.control.Close();
    }
</script>

Thanks,
Shinu.

[Sam]

This is what I need

Thank you,
-Sam

[Karla]

function OnClientClicking is not working for me. The following like returns null

var textboxvalue1 = $find('<%=RadTextBox1.ClientID %>').get_value(); 

It works for any controls in the parent page but not for controls in the radwindow, seems like I can't access controls in the child radwindow. Any idea why?

[Shinu]

Hi Karla,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true">
    <ContentTemplate>
        <telerik:RadTextBox ID="RadTextBox1" runat="server">
        </telerik:RadTextBox>
        <telerik:RadButton ID="RadButton1" runat="server" Text="GetValue" AutoPostBack="false"
            OnClientClicking="OnClientClicking1">
        </telerik:RadButton>
    </ContentTemplate>
</telerik:RadWindow>

JavaScript:

<script type="text/javascript">
    function OnClientClicking1(sender, args) {
        var value = $find('<%=RadTextBox1.ClientID %>').get_value();
        alert(value);
    }
</script>

Please provide your code if it doesn't help.
Thanks,
Shinu.