Using Popup Extender – Some tips

Popup extender is a very useful control included in AJAX Control tool kit. You can find
many articles and blogs if you search internet for this. You can download toolkit from here.
and you can see controls in action live from here.

Here is some of my observations:

When you use Popup Extender, if there is any dropdown list controls in your parent page, when popup is displayes, extender will automatically make the dropdowns invisible. This is to prevent dropdown to show up over the popup (since popup is rendered as a “div”). But many times I have noticed that, extender fails to set the visibility to hidden when popup is displayed. In these instances, we should find these controls and make these style changes ourselves. Another funky thing I have noticed that I have noticed is once popup unloads, the dropdowns still does not show up! Again, workaround is to get handle to these controls and make it visible again on popup unload.

If you have a master page, your page controls are rendered (including popup extender) with control prefixes for Id/names. So it is better to use $find with BehaviorId of your popup extender and finding control using that instead of using a $get with id of the control.
Another weird issue, I have seen with popup extender is that, some of my controls dissappear on popup was shown the second time. After a lot of digging and trial and error, I changed the markup to add table to hold the controls…and it started working !!!

    <ajaxToolKit:ModalPopupExtender     TargetControlID="myButton"
    ID="myPopUp" runat="server" PopupControlID="popUpPanel"
    BackgroundCssClass="modalBackground" BehaviorID="myPopUpBehavior"
//to show popup
var modal = $find('myPopUpBehavior');
if (modal!=null); 
//to hide popup
var modal = $find('myPopUpBehavior');
if (modal!=null) modal.hide(); 

Popup Extender requires you to provide a TargetControlID, so if you want to have a popup extender for a control that is dynamically created, you can attach the popup extender to a hidden form field design time, so that your code compiles, and in run time attach to your dynamically created control.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s