How to use Multiple RadWindowManager in one page ?

[Emmanuel Rinn]

Hi,

I have an issue using 2 RadWindowManager in the same page: the javascript OnClientClose method of a RadWindow managed by the second RadWindowManager is never invoked, when closing this window.

To describe more precisely my scenario: the page contains 2 usercontrols where each defines their RadWindowManager and their RadWindow (used as dialog boxes). When closing a RadWindow, their OnClientClose method is getting back some arguments, and pass them into a hidden input control of each user control (TopicId in Control1, ContactId in Control2), and finally invoke a hidden button (btnHidden in each userControl) in order to execute some treatment server-side.

It works fine for the RadWindows in Control 1. The OnImageUploader() javascript function is invoked properly. But is does not work for the RadWindow in Control 2, the OnClientClose() is never invoked.

Here is a simplified version of these 2 controls.

Control 1:

    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
    <script type="text/javascript">
        //<![CDATA[
        function openImageUploader() {
            var oWnd = radopen("ImageUploader.aspx", "RadWindow2");
        }

        function openImageCatalog() {
            var oWnd = radopen("ImageCatalog.aspx", "RadWindow3");
        }

        function OnImageUploaderClose(oWnd, args) {

            //get the transferred arguments
            var arg = args.get_argument();
            if (arg) {
                var contactInput = document.getElementById("<%= TopicId.ClientID %>");
                if ( contactInput ) contactInput.value = arg.topicId;

                var btn = document.getElementById("<%= btnHidden.ClientID %>");
                if (btn) btn.click();
            }
        }

        //]]>
        </script>
    </telerik:RadScriptBlock>

    <telerik:RadWindowManager ID="RadWindowManager2" ShowContentDuringLoad="false" VisibleStatusbar="false"
        ReloadOnShow="true" runat="server" Skin="Web20">
        <Windows>
            <telerik:RadWindow runat="server" ID="RadWindow2"
                Modal="true"
                Behaviors="Move,Close"
                OnClientClose="OnImageUploaderClose"
                NavigateUrl="~/Customer/ImageUploader.aspx"
                Width="460px" Height="300px"
                >
            </telerik:RadWindow>
            <telerik:RadWindow runat="server" ID="RadWindow3"
                Modal="true"
                Behaviors="Move,Close"
                OnClientClose="OnImageUploaderClose"
                NavigateUrl="~/Customer/ImageCatalog.aspx"
                Width="420px" Height="480px"
                >
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

    <asp:HiddenField ID="TopicId" runat="server" />

    <div style="float:left; margin-left:5px;" >

    </div>

<asp:Button
    ID="btnHidden"
    runat="server"
    Text="_hiddenrefresh"
    style="display:none;"
    CausesValidation="true"
    UseSubmitBehavior="true"
    OnClick="btnHidden_Click"
    Width="32px" />

Control 2:

 

<telerik:RadScriptBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
    //<![CDATA[
    function openAddressBook()
    {
        var oWnd = radopen("AddressBook.aspx", "RadWindow1");
    }

    function OnClientClose(oWnd,args)
    {
        //get the transferred arguments
        var arg = args.get_argument();
        if(arg)
        {
            var contactInput = document.getElementById("<%= ContactId.ClientID %>");
            contactInput.value = arg.contactId;

            var btn = document.getElementById("<%= btnHidden.ClientID %>");
            if (btn) btn.click();
        }
    }
    //]]>
</script>
</telerik:RadScriptBlock>

<telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false"
    ReloadOnShow="true" runat="server" Skin="Web20">
    <Windows>
        <telerik:RadWindow runat="server" ID="RadWindow1"
            Modal="true"
            Behaviors="Move,Close" OnClientClose="OnClientClose"
            NavigateUrl="~/Customer/AddressBook.aspx" Width="280px" Height="540px" >
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

<div style="margin-bottom:10px;">

    <asp:HiddenField ID="ContactId" runat="server" />

</div>

<asp:Button
    ID="btnHidden"
    runat="server"
    Text="_hiddenrefresh"
    style="display:none;"
    CausesValidation="true"
    UseSubmitBehavior="true"
    OnClick="btnHidden_Click"
    Width="32px" />

 

 

After several tests, it appears that the RadWindowManager in control 1 is receiving the close event.
So I imagine that I need to use and define only one RadWindowManager somewhere, but then how can I pass my dialog box results to the correct control ? ( my knowledge with JavaScript in very poor )

Many thanks for any help
Emmanuel

 

[Georgi Tunev]

Hello Emmanuel Rinn,

Such behavior is expected if you have more than 1 RadWindowManager on the page. In such case, you need to take into consideration the following:

   1. All RadWindowManager's functions (radopen, radalert, radconfirm, radprompt, GetRadWindowManager, etc) are always using the first rendered RadWindowManager on the page.
   2. Every RadWindowManager "knows" only the RadWindows that are declared in its Windows collection.

This means that if you have a RadWindow2 declared in RadWindowManager2, and you use something like radopen(myUrl, "RadWindow2");, radopen will use RadWindowManager1 and will open a new RadWindow with the settings taken from RadWindowManager1. To avoid that problem, when you have multiple managers on a page, you need to get a reference to the correct RadWindowManager first and then call its methods.
e.g.
var manager = $find("<%= RadWindowManager2.ClientID %>");
manager.open(myUrl, "RadWindow2");

Regards,
Georgi Tunev
the Telerik team

[Emmanuel Rinn]

Many thanks, it works fine...

[Simon]

needed this too - thanks :)

[Sandhya]

Worked for me too :) thanks a lot for the much needed post..