Popup not raised in a linkbutton click of gridview

Question

I am trying to show a popup from a grid view. But when I try to run the below code in the website the popup panel is not visible. But when I remove the style for panel(ie display=none;) then it just shows like a panel and not like a popup. In a button click of the link button in the grid view I am trying to show a popup. Help me...

<asp:UpdatePanel runat="server" ID="up1">
                        <ContentTemplate>
                            <asp:GridView ID="minidata" CssClass="table" runat="server" AutoGenerateColumns="false" DataKeyNames="abstract">

                                <Columns>
                                    <asp:BoundField DataField="pid" HeaderText="MyFileId" />
                                    <asp:BoundField DataField="video" HeaderText="MyFileurl" />
                                    <asp:TemplateField HeaderText="abstract">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lnkDownload" runat="server" Text="Download" OnClick="lnkDownload_Click"></asp:LinkButton>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>

                            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>


                            <asp:Panel runat="server" ID="panel1" Height="200px" Width="300px" BorderStyle="Solid" BorderWidth="2px" style="display:none;">
                                <div>
                                    <table>
                                        <tr>
                                            <td>
                                                <asp:Label runat="server" Text="sacca"></asp:Label>
                                            </td>
                                            <td>
                                                <asp:TextBox ID="emails" runat="server"></asp:TextBox>
                                            </td>
                                            <td>
                                                <asp:LinkButton runat="server">5e76d</asp:LinkButton>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                            </asp:Panel>
                            <asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="panel1" TargetControlID="Button1" runat="server"></asp:ModalPopupExtender>
                            <asp:Button ID="Button1" Style="display: none;" runat="server" Text="Button" />
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="minidata" />
                        </Triggers>
                    </asp:UpdatePanel>

In the .cs file

    LinkButton lnkbtn = sender as LinkButton;
    GridViewRow gvrow = lnkbtn.NamingContainer as GridViewRow;
    string filePath = minidata.DataKeys[gvrow.RowIndex].Value.ToString();
    HiddenField1.Value = filePath;
    emails.Text = "myemail";
    this.ModalPopupExtender1.Show();

And when I inspect the website I cannot found the panel displayed in the page

Answer 1

Yeah I knew that before. You have to simulate the click on the TargetControl of your modalPopupExtender. So in your code it seems to be Button1.

So try to do that by replacing this

<asp:LinkButton ID="lnkDownload" runat="server" Text="Download" OnClick="lnkDownload_Click"></asp:LinkButton>

with

<asp:LinkButton ID="lnkDownload" runat="server" Text="Download" onclick="$('[id$=Button1]').click()"></asp:LinkButton>

Your server-side code is not useful for this method

EDIT

Ok, you just haven't JQuery in your app ^^.

Could you add JQuery in your app or it is a constraint ?

If it is, waiting I found you a native JavScript code, try by including this

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"/>