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

asp.net gridview ajaxcontroltoolkit modalpopupextender

12,510

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()" />

12,510

Author by

Fatemeh M

Updated on June 24, 2022

Comments

Fatemeh M almost 2 years

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

software about 11 years

Hi I am using your code, but I am getting an error.. Microsoft JScript runtime error: Sys.ArgumentNullException: Value cannot be null. Parameter name: handler
DavRob60 about 11 years

works fine for me, well tested solution. Your error might be somewhere else. Try to debug it to see where the error occurs.
software about 11 years

some how got the error fixed. but It is not triggering Pop up(Message Box).
DavRob60 about 11 years

@software Well, if that helped you, an up-vote on both the question and this answer would be appreciated.
ebooyens almost 8 years

This is great, I just seem to get a postback though when I click the new button so the popup works but then page gets reloaded... AutoPostBack property doesn't seem to be available, any thoughts? Thanks!
DavRob60 almost 8 years

@ebooyens If you get a postback when you click the button, you did something wrong. You could try to test it in an isolated page.
ebooyens almost 8 years

@DavRob60 I think it's being caused by the Command Buttons in my Gridview, need to retain these so still trying to figure out if I can make another plan
ebooyens almost 8 years

@DavRob60 It seems placing the Gridview inside an UpdatePanel but keeping the pop-up outside of it does the trick