Close Radwindow with button in ContentTemplate

[Scott Cullen]

Hi,

I'm trying to close a RadWindow using a button defined in the RadWindow's ContentTemplate, but I'm having trouble getting a reference to the RadWindow object using my GetWindow() javascript function. It's the same GetWindow function that I use in other RadWindows (and that's used in various Telerik examples) and it works fine, except in those scenarios I'm using the NavigateURL property instead of ContentTemplate. 

I'm using Firefox right now, so I expect the first part of the if-clause in the GetWindow() function to execute, but instead it drops down into the else-clause and then I get a frameElement is null error (since it's Firefox I assume.) But really the first part of the if-clause should be executing.

Here is a sample:

Thanks for your help, -Scott

ASP:

        <telerik:RadWindowManager Skin="WebBlue" ID="RadWindowManager2" onAutoSize="true" Behaviors="Close" VisibleStatusbar="false" runat="server">
            <Windows>
                <telerik:RadWindow Skin="WebBlue" AutoSize="true" ID="RadCommentWindow" IconUrl="favicon.ico" runat="server">
                    <ContentTemplate>
                        <asp:Label runat="server">Please enter a comment:<br />(max 1000 characters)</asp:Label><br />
                        <textarea rows="7" style="width: 400px;" id="txtComment"></textarea><br />

                       <asp:Button runat="server" ID="Button1" Text="OK" OnClientClick="if(!OnClientClose()) { return false; }" />

                     </ContentTemplate>
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>

JavaScript:

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

        function OnClientClose(oWnd, args) {
            GetRadWindow().close()
        }

[Shinu]

Hi Scott Cullen,

Try the following code in order to close the RadWindow.

JavaScript:

<script type="text/javascript">
    function OnClientClose(oWnd, args) {
        var oWnd = GetRadWindowManager().getWindowByName("RadCommentWindow");
        oWnd.close();
    }
</script>

Regards,
Shinu.

[Georgi Tunev]

Hello Scott,

GetRadWindow() can be used only in a content page as it gets a reference to the RadWindow object in the parent page. In scenario  like yours, you should get a reference to the RadWindow either by using GetRadWindowManager().getWindowByName() as Shinu suggested, or the ASP.NET AJAX native $find() function. Once you get the RadWindow object, you can call its close() method.


All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Scott Cullen]

Thanks very much Shinu and Georgi. That worked great and makes sense to me now.

-Scott

[Richard Irwin]

I an't get any of this to work for me

Scott Cullen can you send me a sample of your code that works

The only difference is that i have an rtad ajax panel around the content controls

 

<telerik:RadWindow ID="RadWindow1" runat="server" Modal="True"

 

 

ShowContentDuringLoad="False" Height="600px" Width="1000px"

 

 

Behavior="Default" InitialBehavior="None" Left="" Top="">

 

 

<ContentTemplate>

 

 

<telerik:RadAjaxPanel ID="FilterRadAjaxPanel" runat="server" height="400px"

 

 

width="1000px" EnableAJAX=true>

 

Filter:

<asp:TextBox ID="tbFilter1" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp; <asp:TextBox ID="tbFilter1Value" runat="server"></asp:TextBox><br />

 

 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 

 

<asp:TextBox ID="tbFilter2" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp; <asp:TextBox ID="tbFilter2Value" runat="server"></asp:TextBox><br />

 

 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

 

 

<asp:TextBox ID="tbFilter3" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp; <asp:TextBox ID="tbFilter3Value" runat="server"></asp:TextBox><br />

 

 

<br />

 

Sort:

<

 

br />

 

<

 

asp:TextBox ID="tbSort1" runat="server"></asp:TextBox><asp:RadioButtonList ID="rblSort1Direction" runat="server" AutoPostBack=false RepeatDirection=Horizontal RepeatLayout=Table>

 

 

<asp:ListItem Selected="True" Value="asc">Ascending</asp:ListItem>

 

 

<asp:ListItem Value="desc">Descinding</asp:ListItem>

 

 

</asp:RadioButtonList><br />

 

 

<asp:TextBox ID="tbSort2" runat="server"></asp:TextBox></asp:TextBox><asp:RadioButtonList ID="rblSort2Direction" runat="server" AutoPostBack=false RepeatDirection=Horizontal RepeatLayout=Table>

 

 

<asp:ListItem Selected="True" Value="asc">Ascending</asp:ListItem>

 

 

<asp:ListItem Value="desc">Descinding</asp:ListItem>

 

 

</asp:RadioButtonList><br />

 

 

<asp:TextBox ID="tbSort3" runat="server"></asp:TextBox></asp:TextBox><asp:RadioButtonList ID="rblSort3Direction" runat="server" AutoPostBack=false RepeatDirection=Horizontal RepeatLayout=Table>

 

 

<asp:ListItem Selected="True" Value="asc">Ascending</asp:ListItem>

 

 

<asp:ListItem Value="desc">Descinding</asp:ListItem>

 

 

</asp:RadioButtonList><br />

 

 

<asp:Button ID="btnApplyFilter" runat="server" Text="ApplyFilter" OnClick="ApplyFilter" />

 

 

<asp:Button ID="Button1" runat="server" Text="Button Click Tset" OnClick="ButtonClickTest" />

 

 

</telerik:RadAjaxPanel>

 

 

</ContentTemplate>

 

 

</telerik:RadWindow>

 

[Scott Cullen]

Hi Richard,

This is the code I'm currently using. What I'm doing is displaying a RadWindow to the user so they can enter a comment. First they hit btnAddComment to show the Comment RadWindow, which contains a Textbox and two buttons: btnCommentSave and btnCommentCancel. If they hit btnCommentSave I save their comment to a hidden field on the parent page (so I can process it later) and I close the RadWindow, otherwise if they hit btnCommentCancel I only close the Comment RadWindow. I'm not sure why having a RadAjaxPanel in your code would have any negative affect.

Let me know if you have any questions.

-Scott

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <script type="text/javascript">         function openWin() {             var oWnd = radopen("", "RadCommentWindow");             var comment = document.getElementById('hiddenComment').value;             document.getElementById('txtComment').value = comment;         }         function GetCommentRadWindow() {             //using ContextTemplate instead of Navigate URL             //for RadWindow so we need to get RadWindow by name             var oWnd = GetRadWindowManager().getWindowByName("RadCommentWindow");             return oWnd;         }         function Close() {             GetCommentRadWindow().close();         }         function SaveComment(oWnd, args) {             var comment = document.getElementById('txtComment').value;             document.getElementById('hiddenComment').value = comment;             Close();         }     </script>  </head> <body> <form id="frmEdit" runat="server">   <asp:Button Visible="false" ID="btnAddComment" runat="server" OnClientClick="openWin(); return false;" /> <telerik:RadWindowManager Modal="true" Skin="WebBlue" ID="RadWindowManager2" onAutoSize="true" Behaviors="Close" VisibleStatusbar="false" runat="server">

<Windows>

<telerik:RadWindow Skin="WebBlue" AutoSize="true" ID="RadCommentWindow" IconUrl="favicon.ico" runat="server">

<ContentTemplate>

<asp:Label ID="Label1" runat="server">Please enter a procedure comment (max 1000 characters):</asp:Label><br />

<textarea rows="7" cols="60" id="txtComment"></textarea><br />

<div style="float:right;">

<asp:Button runat="server" ID="btnCommentCancel" Text="Cancel" OnClientClick="Close(); return false;" />

<asp:Button runat="server" ID="btnCommentSave" Text="OK" OnClientClick="SaveComment(); return false;" />

</div>

</ContentTemplate>

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager> <asp:HiddenField ID="hiddenComment" runat="server" /> </form> </body> </html>