Page view counter

Popup Extenders, UpdatePanels, and my composite custom control; help

Rate It (1)

Last post 08-20-2008 5:11 AM by vimal.vincent. 27 replies.

Sort Posts:

  • Popup Extenders, UpdatePanels, and my composite custom control; help

    05-08-2006, 6:09 PM
    • Loading...
    • shines2k
    • Joined on 03-29-2006, 10:51 PM
    • Posts 22
    • Points 110

    Here's what I have so far:

    • A composite custom control that creates Label and ListBox controls. The Label controls are  Targets for PopupExtenders and the ListBox controls are the Popups (that is, when a label is clicked, its ListBox pops up). The ListBox controls have a custom extender that I wrote attached to them.
    • A page with an UpdatePanel inside of a Panel; the Panel has a CollapsiblePanelExtender attached.
    • In the Page_Init() method for the hosting page, a composite custom control is added to a PlaceHolder inside the UpdatePanel.

    Now, it actually all "works" up to a point. Clicking on a Label causes a ListBox to popup, my extender works fine with the ListBox (it copies the ListBox's SelectedValue to the Label's Text on a click event). However, there are couple fatal problems:

    • Unlike the nice demo on the Atlas site, when the page initializes I can momentarily see all of the controls that are the PopupControlID targets of the PopupExtenders. They disappear almost immediately, but the effect is very ugly. How does the Atlas demo site solve this problem? I looked at the code but I don't see any remarkable difference.
    • The moment a server postback happens, the debugger breaks in with the error "Microsoft JScript runtime error: 'this.control.element' is null or not an object". When I remove the UpdatePanel from the page, this error goes away. However, having an UpdatePanel contain my composite custom controls is essential.

    Any help would be much appreciated.

  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-09-2006, 12:17 PM
    • Loading...
    • sburke_msft
    • Joined on 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • Points 4,346
    • AspNetTeam

    The panels don't show on the demo due to their initial style.  What you're missing is in the stylesheet:

    /*Popup Control*/
    .popupControl{
     background-color:White;
     position:absolute;
     visibility:hidden;
    }

    For the postback case you've got a script problem there, and if it's on postback theres a good chance something isn't getting cleaned up properly in dispose.  Can you get the debugger to take you to the offending line of code?  Another trick here is to use FireFox - the JavaScript console in there is very helpful at taking you right to the line of code that's causing these sorts of problems.

    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-09-2006, 12:58 PM
    • Loading...
    • shines2k
    • Joined on 03-29-2006, 10:51 PM
    • Posts 22
    • Points 110

    The offending line of code is in PopupControlBehavior.js, the first line of "this.close", but I assume the real problem is elsewhere. The problem still exists if I remove the my custom extender. It only goes away when I remove the UpdatePanel that holds the entire custom control.

  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-09-2006, 1:11 PM
    • Loading...
    • shines2k
    • Joined on 03-29-2006, 10:51 PM
    • Posts 22
    • Points 110

    One more thing, I switched over to using the HoverMenu extender and it works fine. It's a good work-around for me at the moment.

    (Also, thanks for the help with the popup visibility problem).

  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-09-2006, 1:25 PM
    • Loading...
    • sburke_msft
    • Joined on 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • Points 4,346
    • AspNetTeam
    I'd like to get the popup issue fixed.  Any chance you would whip up a simple repro of the problem?
    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-09-2006, 5:34 PM
    • Loading...
    • shines2k
    • Joined on 03-29-2006, 10:51 PM
    • Posts 22
    • Points 110

    I was detoured by other things this morning, and just got around to this. Here's a simple site with a custom control that shows the problem. 

    As is, clicking the "Trigger Error" button will, uh, trigger the error. If you remove the UpdatePanel from the page, it all works fine.

     

    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using AtlasControlToolkit;
    
    namespace AtlasPopupSite
    {
        /// <summary>
        /// Summary description for TestControl
        /// </summary>
        public class TestControl : CompositeControl
        {
            protected override void CreateChildControls()
            {
                this.Controls.Clear();
    
                Label lab = new Label();
                lab.Text = "Test Popup ";
                lab.ID = "lab";
                this.Controls.Add(lab);
    
                TextBox tb = new TextBox();
                tb.ID = "textbox";
                this.Controls.Add(tb);
    
                Button but = new Button();
                but.Text = "Trigger Error";
                but.ID = "but";
                this.Controls.Add(but);
    
                Panel popupPanel = new Panel();
                popupPanel.ID = "popuppanel";
                popupPanel.CssClass = "PopupPanel";
                this.Controls.Add(popupPanel);
    
                ListBox list = new ListBox();
                list.ID = "listbox";
                list.Items.Add(new ListItem("test, test"));
                list.Items.Add(new ListItem("popup", "popup"));
                popupPanel.Controls.Add(list);
    
                PopupControlProperties popupProps = new PopupControlProperties();
                popupProps.TargetControlID = "textbox";
                popupProps.PopupControlID = "listbox";
                popupProps.Position = PopupControlPopupPosition.Bottom;
    
                PopupControlExtender popupExt = new PopupControlExtender();
                popupExt.TargetProperties.Add(popupProps);
                popupExt.ID = "popupext";
                this.Controls.Add(popupExt);
            }
        }
    }
     
    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Register Namespace="AtlasPopupSite" TagPrefix="tc" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            .PopupPanel {visibility:hidden}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
            <asp:Panel ID="toppanel" runat="server">
                <atlas:UpdatePanel ID="up1" runat="server" Mode="Always">
                    <ContentTemplate>
                        <tc:TestControl runat="server" id="test" />
                    </ContentTemplate>
                </atlas:UpdatePanel>
            </asp:Panel>
        </form>
    </body>
    </html>
    
     
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-09-2006, 5:54 PM
    • Loading...
    • sburke_msft
    • Joined on 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • Points 4,346
    • AspNetTeam
    Thanks for pulling this together.
    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-10-2006, 4:38 PM

    Hi shines2k,

    We get the best bugs from the community.  Thank you very much for taking the time to whip up this repro - it's helped us find and fix a problem that was affecting others as well (http://forums.asp.net/thread/1280781.aspx).  It involved three changes to the PopupControlBehavior.js script that you can make too or just wait for our next release:

    1.  Prevent this.close from being called after we've been disposed.
       // Called automatically when a page load/postback happens
       // via Page.ClientScript.RegisterStartupScript
       this.close = function
    () {
         // Since this was invoked via Page.ClientScript.RegisterStartupScript it may get
         // called after our Dispose method which we just want to ignore
         if (!this.control)
          
    return;

         // Look at result of popup
         var e = this
    .control.element;
         var value = AtlasControlToolkit.PopupControlBehavior.callBaseMethod(this, 'get_ClientState'
    );
         if
    (0 < value.length) {
           if ('$$CANCEL$$'
    != value) {
             // Result is to be committed
             if
    (_commitProperty) {
               // Use the specified property
               e[_commitProperty] = value;
             } else if ('text'
    == e.type) {
               // Use the default property
               e.value = value;
             } else
    {
               debug.assert(false, 'No default property supported for control ' + e.id + ' of type ' + e.type + '.'
    );
             }
             // Additionally run commit script if present
             if
    (_commitScript) {
               eval(_commitScript);
             }
           }

           // Hide the popup
           this
    .hidePopup();
         }
         AtlasControlToolkit.PopupControlBehavior.callBaseMethod(this, 'set_ClientState', [ ''
    ]);
       }

    2.  Work around a known "Atlas" issue with UpdatePanels in this.dispose.
       this.dispose = function() {
         var e = this.control.element;
       
         // Dispose of control wrapper and behavior
         if (_popupBehavior) {
           _popupBehavior.dispose();
           _popupBehavior = null;
         }
         if (_popupControl) {
           _popupControl.dispose();
           _popupControl = null;
         }
       
         // Detach events
         if (_focusHandler) {
           e.detachEvent('onfocus', _focusHandler);
           _focusHandler = null
         }
         if (_clickFocusHandler) {
           e.detachEvent('onclick', _clickFocusHandler); 
           _clickFocusHandler = null;
         }
         if (_keyDownHandler) {
           e.detachEvent('onkeydown', _keyDownHandler);
           _keyDownHandler = false;
         }
         if (_bodyClickHandler) {
           if (_popupElement) {
             document.body.detachEvent('onclick', _bodyClickHandler);
           }
           _bodyClickHandler = null;
         }
         if (_clickHandler) {
           if (_popupElement) {
             _popupElement.detachEvent('onclick', _clickHandler);
           }
           _clickHandler = null;
         }
         if (_popupKeyDownHandler) {
           if (_popupElement) {
             _popupElement.detachEvent('onkeydown', _popupKeyDownHandler);
           }
           _popupKeyDownHandler = null;
         }
       
         // The following call to removeObject avoids the following warning
         // when the PopupControl is reloaded within an UpdatePanel.
         // Assertion Failed: Duplicate use of id "ControlXXXXX"
         // for object of type "AtlasControlToolkit.PopupControlBehavior".
       
         var context = Sys.Application.getMarkupContext();
         if (context)
           context.removeObject(this);


        
    AtlasControlToolkit.PopupControlBehavior.callBaseMethod(this, 'dispose');
       }

    3.  Prevent hiding disposed old popups in this.showPopup.
       // Display the popup
       this.showPopup = function
    () {
         var
    old = __AtlasControlToolkit_PopupControlBehavior_VisiblePopup;
         if (old != null && old.control != null
    ) {
           old.hidePopup();
         }

         _popupBehavior.show();
         _popupVisible = true
    ;
         __AtlasControlToolkit_PopupControlBehavior_VisiblePopup = this
    ;
       }


    Thanks,
    Ted

    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-10-2006, 7:28 PM
    • Loading...
    • shines2k
    • Joined on 03-29-2006, 10:51 PM
    • Posts 22
    • Points 110
    Awesome. Glad to help, and thanks for the fix!
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-11-2006, 7:08 AM
    • Loading...
    • Recon_609
    • Joined on 03-05-2005, 11:48 PM
    • Posts 89
    • Points 405

    Great response guys

    I look forward to the next refresh  :)

    I'd also like to see more examples of building Atlas controls that extend other controls such as the validators, composite controls, etc...

    It's good to see the asp.net team listening to the community as well!

  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-14-2006, 2:17 AM
    • Loading...
    • IDisposable
    • Joined on 04-13-2006, 5:50 PM
    • St. Louis, MO, USA, NA, Earth, Sol, Milky Way
    • Posts 37
    • Points 185

    I've just started reading the JS side of this stuff and it occured to me that the pattern in the dispose methods seems subtly wrong.  Shouldn't we, in general, detach from the events BEFORE we dispose of all the things that we need if that event fires?  I don't really know the underlying nature of the event model in the DOM (nor do I have much confidence that it is consistent between browsers), but I just have that gut feeling that we should disconnect before tearing ourselves apart.

    Thoughts? Should we make sure we detach from the events in the right order too (e.g. unsubscribe from the keydown and onfocus events before unsubscribing from the keyup and onblur?

    http://musingmarc.blogspot.com
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-15-2006, 5:47 PM
    • Loading...
    • David Anson
    • Joined on 04-11-2006, 1:39 AM
    • Microsoft
    • Posts 1,842
    • Points 8,710
    • AspNetTeam
    I agree with you in principle and try to do what you recommend in practice. However, we've probably done this in the "wrong" order in a few places as you note. The good news is that I don't think it really matters as most browsers seem to be essentially single-threaded for this stuff and so there won't be any danger in doing things backwards. (But that's no reason not to strive for correctness anyway!) I'll pass this on to the other guys so we can try to be more mindful of this in the future. Thanks!!

    http://blogs.msdn.com/delay

    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-15-2006, 6:03 PM
    • Loading...
    • sburke_msft
    • Joined on 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • Points 4,346
    • AspNetTeam

    Yes - everyone's right here.  We should probably do this just for housekeeping and it (hopefully) won't really matter due to the synchronous nature of the browsers.  Even if an event is still in the queue, by the time it gets processed the full dispose() has been called so you're fine.

    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-24-2006, 11:18 AM
    • Loading...
    • Osiris209
    • Joined on 02-11-2006, 4:19 PM
    • England
    • Posts 133
    • Points 568

    I have made the changes to the js file, rebuilt the project and now i dont get the error....however.
    Now this line doesnt work....
    PopupControlExtender1.Commit(txtStartDate, Calendar1.SelectedDate.ToShortDateString());

    i have to do this...
    txtStartDate.Text = Calendar1.SelectedDate.ToShortDateString();

    which is no problem except i want to use it twice....so at present i have two calendar controls with seperate selection changes event handlers......

    Any ideas???

    Thanks
    Steve

     

  • Re: Popup Extenders, UpdatePanels, and my composite custom control; help

    05-26-2006, 2:21 PM
    Hi Steve,

    I'm not sure what's causing this.  Could you provide a full sample of your page so I can see exactly what you're looking at?

    Thanks,
    Ted
    This posting is provided "AS IS" with no warranties, and confers no rights.
Page 1 of 2 (28 items) 1 2 Next >