Firing a GridView RowCommand event from a Button inside a Template Field - C#

Question

So I have a GridView (gvSummary) which contains a template field with a button inside (btnOpen). This button's purpose is to open a second GridView (gvDetail) in a modal window based on row information from gvSummary.

The problem I am having is that I can't seem to execute the code in gvSummary_RowCommand by clicking the button btnOpen. I can execute the code from the <asp:ButtonField> but this doesn't open the second GridView.

Here is my code:

<asp:GridView ID="gvSummary" runat="server" DataSourceID="SqlgvSummary" AutoGenerateColumns="false"
OnRowDataBound="gvSummary_RowDataBound" OnRowCommand="gvSummary_RowCommand" CssClass="table table-hover table-bordered" EmptyDataText="No data to display." >
    <Columns>
        <asp:BoundField DataField="ClientRef" HeaderText="Reference No."/>
        <asp:BoundField DataField="InsertedWhen" HeaderText="Transaction Date" DataFormatString="{0:dd-MM-yyyy}" />
        <asp:BoundField DataField="Commodity" HeaderText="Commodity" />
        <asp:BoundField DataField="StartDate" HeaderText="Settlement Date" DataFormatString="{0:dd-MM-yyyy}" />
        <asp:BoundField DataField="EndDate" HeaderText="Delivery Date" DataFormatString="{0:dd-MM-yyyy}" />
        <asp:BoundField DataField="Value" HeaderText="Transaction Value" DataFormatString="{0:N2}" />
        <asp:BoundField DataField="Fee" HeaderText="Fee" DataFormatString="{0:N2}" />
        <asp:BoundField DataField="InsertedBy" HeaderText="Purchased By" />
        <asp:ButtonField ButtonType="Button" CommandName="cmdDetail1" HeaderText="View Details" Text="View" ControlStyle-CssClass="openModal"/>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <div>
                    <asp:Button ID="btnOpen" runat="server" Text="Show Gridview" CssClass="openModal" CommandName="cmdDetail2"/>
                        <div class="modal" id="idModal">
                            <div class="container">
                                <div class="modal-header">
                                    <h1>Transaction Details<a class="close-modal" href="#">&times;</a></h1>
                                </div>
                                <div class="modal-body">
                                    <asp:GridView ID="gvDetail" runat="server" DataSourceID="SqlgvDetail" AutoGenerateColumns="false"
                                    OnRowDataBound="gvDetail_RowDataBound" CssClass="table table-hover table-bordered" EmptyDataText="No data to display." >
                                        <Columns>
                                            <asp:BoundField DataField="metalid" HeaderText="Metal ID"/>
                                            <asp:BoundField DataField="enddate" HeaderText="End Date" DataFormatString="{0:dd-MM-yyyy}" />
                                            <asp:BoundField DataField="startdate" HeaderText="Start Date" DataFormatString="{0:dd-MM-yyyy}" />
                                            <asp:BoundField DataField="clientref" HeaderText="Client Ref" />
                                            <asp:BoundField DataField="quantity" HeaderText="Quantity" DataFormatString="{0:N2}" />
                                        </Columns>
                                    </asp:GridView>
                                </div>
                                <div class="modal-footer">
                                    <asp:Button ID="btn_close" runat="server" Text="OK" CssClass="close-modal btn-sm btn-primary"/>
                                </div>
                            </div>
                        </div>
                    <div class="modal-backdrop"></div>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Code Behind:

protected void gvSummary_RowCommand(object sender, GridViewCommandEventArgs e)
{
    int index = Convert.ToInt32(e.CommandArgument);
    string name = e.CommandName.ToString();
    string clientRef = gvSummary.Rows[index].Cells[0].Text;
    Response.Write("<br> index = " + index);
    Response.Write("<br> name = " + name);
    Response.Write("<br> clientRef = " + clientRef);

    SqlgvDetail.SelectCommand = " SELECT td.metalid , td.enddate , td.startdate , td.clientref , td.quantity " +
                                " FROM trxdetail td " +
                                " WHERE td.clientref = " + "'" + clientRef + "'";
}

When I click the <asp:ButtonField>, the SQL is correct and the Response.Write() sets the correct variables in gvSummary_RowCommand. However, the modal window doesn't open.

When I click btnOpen, the modal window opens but does not set the variables in gvSummary_RowCommand.

I can't seem to be able to egt this working so any help is appreciated. Thanks.