ModalPopUpExtender – Multiple controls And One Modal

Although the idea behind the modalpopupextender is a very good one, unfortunately this control’s usage is not as straight-forward as its designers would’ve hoped. Whilst in most cases it is true that you can just drop the extender on the page and set its declarative properties to point to the right panel and button triggers, in the more complex cases, such as when the extender inside a GridView, you have to apply some workarounds.

Apparently the ability of setting multiple targets for the modalpopupextender existed at one point in time in one of the beta Atlas releases, however, the team deemed it too complex and didn’t include it in the final release when it became ASP.Net Ajax. So how to work around it?

There are a couple of ways to do this, but the solution is forcibly the same: you gotta use javascript.

What I do is set the modalpopupextender to one of the controls and then any other controls that need to use the same modal I add some javascript to the OnClientClick property which finds the extender control and calls the show() method on it.

<asp:LinkButton
runat=”LinkButton1″
runat=”server”></asp:LinkButton>

<asp:LinkButton
runat=”LinkButton2″
runat=”server”
OnClientClick=”$find(‘DisplayPurchaseInfoModalPopupExtender’).show();return false;”></asp:LinkButton><cc1:ModalPopupExtender
ID=”ModalPopupExtender1″
runat=”server”

TargetControlID=” LinkButton1″
PopupControlID=”PanelModalWindow”></cc1:ModalPopupExtender>

 

If the modalpopupextender control is inside a template in a GridView, you will have to do this in the DataBound event, since otherwise you won’t be able to find out the real name of the extender control.

So, when using a GridView you’d set the OnClientClick property of whatever controls that are going to use the modalpopupextender by doing something like this:

LinkButton linkButton2 = (LinkButton) e.Item.FindControl(“LinkButton2”);
linkButton2.OnClientClick = string.Format(“$find(‘{0}’).show();return false; e.Item.FindControl(“DisplayPurchaseInfoModalPopupExtender”).ClientID);