Open a GridView using row parameters from another GridView

Question

I am opening a modal window from the below button (btnOpen). This bhutton is located inside a GridView. It needs to open another Gridview in the modal window but my code is not working:

<asp:TemplateField>
    <ItemTemplate>
        <asp:Button ID="btnOpen" runat="server" Text="Show Gridview" CommandName="cmdDetail" CommandArgument="<%# ((GridViewRow) Container).DataItemIndex %>"/>
    </ItemTemplate>
</asp:TemplateField>

My Modal Window:

<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" AutoGenerateColumns="false"  DataSourceID="SqlgvDetail"
            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>

Sql DataSource:

<asp:SqlDataSource ID="SqlgvDetail" runat="server" ConnectionString="<%$ ConnectionStrings:InventoryConnectionString %>">
</asp:SqlDataSource>

Code Behind:

protected void gvSummary_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "cmdDetail")
    {
        // Retrieve the row index stored in the CommandArgument property.
        int index = Convert.ToInt32(e.CommandArgument);
        // Retrieve the row that contains the button from the Rows collection.
        GridViewRow row = gvSummary.Rows[index];

        Button btnOpen = row.FindControl("btnOpen") as Button;
        btnOpen.CssClass = "openModal";

        string clientRef = row.Cells[0].Text;

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

When I click a button it gets the SQL command correct but doesn't load the modal. If I then click the button again, It brings up the Modal with the SQL command loaded at the first click.

I've been stuck on this for days so any help is appreciated.