How to set TargetContrlID in ModalPopupExtender with a control in a GridView

Question

How can I set TragetContriID to a HyperLink that is inside a GridView?

I tried this :

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                        PopupControlID="Panel1" 
                        CancelControlID="btnCancel" 
                        OnCancelScript="HideModalPopup()"
                        TargetControlID="GridView1$HyperLink1">
</asp:ModalPopupExtender>

But I have an error: that there is no GridView1$HyperLink1

Answer 1

Setting the TargetControlID of the ModalPopupExtender basically trigger the client side Show function of that ModalPopup when the control is clicked. So you need to wire up the controls yourself.

First, since the ModalPopupExtender need a TargetControlID, you should add a dummy control to link the modal popup to :

<asp:Button runat="server" 
            ID="HiddenTargetControlForModalPopup" 
            style="display:none"/> 

And link the ModalPopupExtender TargetControlID to it

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                        PopupControlID="Panel1" 
                        CancelControlID="btnCancel" 
                        OnCancelScript="HideModalPopup()"  
                        TargetControlID="HiddenTargetControlForModalPopup">
</asp:ModalPopupExtender>

So the ModalPopupExtender now has a target that do nothing. Now we now need to do the target's job. You need a javascript function to show the ModalPopup from client side.

<script type="text/javascript">
     var ModalPopup='<%= ModalPopupExtender1.ClientID %>';

     function ShowModalPopup() {
         //  show the Popup     
         $find(ModalPopup).show();
     }
</script>   

Then you should map the OnClientClick event of the control in your gridview to this javascript function. From your code, I see that you use a asp:HyperLink, I don't think it support the OnClientClick event, so you probably need to switch it to a asp:LinkButton.

<asp:LinkButton ID="LinkButton1" runat="server" 
                OnClientClick="ShowModalPopup()" />