How to use Multiple RadWindowManager in one page ?

5 posts, 0 answers
  1. Emmanuel Rinn
    Emmanuel Rinn avatar
    3 posts
    Member since:
    Sep 2009

    Posted 05 Aug 2010 Link to this post

    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

     

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 09 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Emmanuel Rinn
    Emmanuel Rinn avatar
    3 posts
    Member since:
    Sep 2009

    Posted 11 Aug 2010 Link to this post

    Many thanks, it works fine...
  5. Simon
    Simon avatar
    1 posts
    Member since:
    Aug 2014

    Posted 22 Aug 2014 in reply to Georgi Tunev Link to this post

    needed this too - thanks :)
  6. Sandhya
    Sandhya avatar
    1 posts
    Member since:
    Mar 2016

    Posted 29 Mar Link to this post

    Worked for me too :) thanks a lot for the much needed post..
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017