Question

How do I use a GridView TemplateField containing a LinkButton that is to display the modal on click? I have rows of data that I want to update the details of when clicking the ‘Edit’ LinkButton in that row. There is a bunch of data I need to load via codebehind just before the Modal displays.

I was trying the following, but I can’t do Modal1.Show() in the event handler because it’s in a TemplateField:

<ItemTemplate>
  <asp:Button runat="server" ID="HiddenForModal" style="display: none" />
    <ajaxToolkit:ModalPopupExtender ID="Modal1" runat="server" TargetControlID="HiddenForModal" PopupControlID="pnlModal" />
    <asp:LinkButton ID="btnEdit" runat="server" Text="Edit" onclick="btnEdit_Click" />
    <asp:LinkButton ID="btnDelete" runat="server" Text="Delete"></asp:LinkButton>
</ItemTemplate>

Thanks,
Mark

Answer 1

The key is knowing which row in the GridView was the LinkButton that was clicked. You can do this several ways but the way I implemented it is to capture it in the RowCommand event. Then you can access the ModalPopupExtender in the clicked row via FindControl(..).

Page:

<asp:TemplateField>
  <ItemTemplate>
    <asp:Button ID="Button1" runat="server" style="Display:none;" Text="Button" />
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Popup1" TargetControlID="Button1" BackgroundCssClass="modalBackground" runat="server" />
    <asp:LinkButton ID="LinkButton1" CommandName="Popup" runat="server">Popup</asp:LinkButton>
  </ItemTemplate>
</asp:TemplateField>

Codebehind:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            LinkButton LinkButton1 = (LinkButton)e.Row.FindControl("LinkButton1");
            LinkButton1.CommandArgument = e.Row.RowIndex.ToString();
        }
    }

    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Popup" && e.CommandArgument != null)
        {
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            ModalPopupExtender modalPopupExtender1 = (ModalPopupExtender)GridView1.Rows[rowIndex].FindControl("ModalPopupExtender1");
            modalPopupExtender1.Show();

            //Perform any specific processing.
            Label1.Text = string.Format("Row # {0}", rowIndex);
        }
    }

Additionally, because you are opening the modal on a postback anyways you don’t actually need the ModalPopupExtender (or the hidden button) in the ItemTemplate. You can move that out and put it on the page (by your popup div) and can simply call the Show() method.

Page:

<asp:TemplateField>
  <ItemTemplate>
    <asp:LinkButton ID="LinkButton1" CommandName="Popup" runat="server">Popup</asp:LinkButton>
  </ItemTemplate>
</asp:TemplateField>

Codebehind:

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Popup" && e.CommandArgument != null)
        {
            int rowIndex = Convert.ToInt32(e.CommandArgument);
            ModalPopupExtender1.Show();                

            //Perform any specific processing
            Label1.Text = string.Format("<Br>Row # {0}", rowIndex);
        }
    }

Thanks, good luck!