Develop Reference

GridView and Showing a Panel : C# and ASP.NET

I'm new to C# and asp.net and I have a GridView that has enabled selection on it and I put a button that is called View Products. When a user clicks on View Products, I want to show a panel that has more information for the button.
I have tried everything and looked up multiple ways but nothing is helping me find an answer to my problem.
Picture of the GridView

Ok, this is common, but answers are varied, and I tend to not like how most answers work.
I suggest this approach:
On that page, drop in a "div" with the controls and even additional buttons (such as perhaps a delete command, save command, and "cancel" to simple go back to the grid view.
So, first up, our grid view say like this:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ID"
CssClass="table" Width="45%" ShowHeaderWhenEmpty="true">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdEdit" runat="server" Text="Edit"
CssClass="btn myshadow"
OnClick="cmdEdit_Click"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And say right below the above, we can simple drop in some standard text boxes and controls inside of a "div" that we hide/show for the details when clicked on.
So, say like this:
<div id="EditRecord" runat="server"
style="float:left;display:none;border:solid 2px;padding:15px">
<div style="float:left" class="iForm">
<label>HotelName</label>
<asp:TextBox ID="txtHotel" runat="server" width="280" f="HotelName"/> <br />
<label>First Name</label>
<asp:TextBox ID="tFN" runat="server" Width="140" f="FirstName" /> <br />
<label>Last Name</label>
<asp:TextBox ID="tLN" runat="server" Width="140" f="LastName" /> <br />
<label>City</label>
<asp:TextBox ID="tCity" runat="server" Width="140" f="City" />
<br />
<label>Province</label>
<asp:TextBox ID="tProvince" runat="server" Width="75" f="Province" ></asp:TextBox> <br />
</div>
<div style="float:left;margin-left:20px" class="iForm">
<label>Description</label> <br />
<asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine"
Height="150px" f="Description" ></asp:TextBox> <br />
<asp:CheckBox ID="chkActive" Text=" Active" runat="server" TextAlign="Right" />
<asp:CheckBox ID="chkBalcony" Text=" Has Balcony" runat="server" TextAlign="Right" />
</div>
<div style="clear:both"></div>
<button id="cmdSave" runat="server" class="btn myshadow" onserverclick="cmdSave_ServerClick" >
<span aria-hidden="true" class="glyphicon glyphicon-floppy-saved"> Save</span>
</button>
<button id="cmdCancel" runat="server" class="btn myshadow"
style="margin-left:15px" onserverclick="cmdCancel_ServerClick" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-left"> Back/Cancel</span>
</button>
<button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left:15px">
<span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
</button>
</div>
Again, nothing speical - just controls and text boxes.
So, now our code to load can be this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
}
void LoadGrid()
{
GridView1.DataSource = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName");
GridView1.DataBind();
}
Code for when we click on a button:
Now we can't (like normal) double click on the button to create the event since that button is "nested" in the gv. So, in the markup, just type in for the button
onclick=
When you hit "=" sign, a popup gives you the option to create a plane jane click event for the button. So, choose create event.
Thus the button in the gv becomes this:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdEdit" runat="server" Text="Edit"
CssClass="btn myshadow"
OnClick="cmdEdit_Click"/>
</ItemTemplate>
</asp:TemplateField>
And now our button click event:
it will get the row, load up the controls in that div, and then display the div.
I have this code:
protected void cmdEdit_Click(object sender, EventArgs e)
{
Button cmdEdit = (Button)sender;
GridViewRow gRow = (GridViewRow)cmdEdit.NamingContainer;
int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
DataTable rstData = MyRst($"SELECT * FROM tblHotelsA WHERE ID = {PKID}");
General.FLoader(EditRecord, rstData.Rows[0]); // load up the controls
GridView1.Style.Add("display","none");
EditRecord.Style.Add("display", "normal");
}
And the results are thus this:
Note that the cancel button is rather simple.
You hide the "div" and re-show (un-hide) the grid.
this:
protected void cmdCancel_ServerClick(object sender, EventArgs e)
{
GridView1.Style.Add("display", "normal");
EditRecord.Style.Add("display", "none");
}
And I did use a helper routine (just returns a table).
That was this:
DataTable MyRst(string strSQL)
{
DataTable rstData = new DataTable();
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
{
cmdSQL.Connection.Open();
rstData.Load(cmdSQL.ExecuteReader());
}
}
return rstData;
}
So above is the basic idea, and workings.
And we could now that we have a div?
We could call a jQuery.UI "dialog", and that would in place of the div hide/show, simple call jQuery.UI, and then you get this effect:
I can post the code for how that pop up works, but really, the simple idea is a simple button, get PK row id, load that data into some controls, then hide the grid, show the div, and you off and running.

problem handling Gridview_SelectIndexChanging event with an UpdatePanel ASP.NET

i will try to explain what i have, what i'm trying to do and what is my problem
what i have:
i have a modal with and update panel (i need it because the postback closes my modal) that has two text box, a button and a gridview.
in the textbox i write the name and the surname of a person and with the button i retrieve the data and put it in a gridview.
the gridview has a control to select the row that i want, with that row, i use the data from first three cells to change some hidenField values to use in another function.
in the bottom of the modal i have the add button that only changes a textbox to show that i have the correct data. that button is not enabled by default and the event must enable it
what i want:
i want to select the row that i need, enable the add button and fetch the data in my textbox.
where is my problem:
when i select my row, selectedindexchanging fires but nevers enables the add button so cant fetch my textbox for using it
code:
front code:
<div class="modal fade" id="modalSocio" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabelSocio">
<asp:Label ID="Label4" runat="server" CssClass="text-primary"></asp:Label>
</h5>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div class="modal-body">
<div class="row g-3">
<div class="row">
<div class="col-3">
<asp:TextBox ID="txtBusquedaNombre" runat="server" CssClass="form-control" placeholder="Nombre"></asp:TextBox>
</div>
<div class="col-3">
<asp:TextBox ID="txtBusquedaApellido" runat="server" CssClass="form-control" placeholder="Apellido"></asp:TextBox>
</div>
<div class="col-3">
<asp:LinkButton ID="btnBuscarSocio" runat="server" CssClass="btn btn-outline-success" Text="Buscar" CausesValidation="false" ToolTip="Buscar" OnClick="btnBuscarSocio_Click" ><span class="fas fa-search"></span></asp:LinkButton>
</div>
</div>
<div class="table-responsive mt-3">
<asp:GridView ID="gvSocios" runat="server" CssClass="table table-bordered" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" OnSelectedIndexChanging="gvSocios_SelectedIndexChanging" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Legajo" HeaderText="Nro. Socio" ></asp:BoundField>
<asp:BoundField DataField="nombreSocio" HeaderText="Nombre" />
<asp:BoundField DataField="Apellido" HeaderText="Apellido" />
<asp:CommandField ButtonType="Link" HeaderText="Seleccionar" ShowSelectButton="True" SelectText="<i class='fa fa-check-circle'></i>">
<ControlStyle CssClass="btn btn-outline-secondary" />
</asp:CommandField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
<EmptyDataTemplate>
<div class="alert alert-primary" role="alert">
No se encontraron registros!
</div>
</EmptyDataTemplate>
</asp:GridView>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal-footer">
<asp:Button ID="BtnCancelarSocio" runat="server" Text="Cancelar" CssClass="btn btn-secondary" OnClick="btnCancelar_Click" CausesValidation="False" />
<asp:Button ID="BtnAgregarSocio" ClientIDMode="Static" runat="server" CausesValidation="false" Text="Seleccionar" CssClass="btn btn-success" OnClick="BtnAgregarSocio_Click" />
</div>
</div>
</div>
</div>
codeBehind:
protected void BtnAgregarSocio_Click(object sender, EventArgs e)
{
TxtSocio.Text = hfidNombreSocio.Value;
}
protected void gvSocios_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
var row = gvFormasPago.Rows[e.NewSelectedIndex];
BtnAgregarSocio.Enabled = true;
hfSocio.Value = row.Cells[0].Text;
hfidNombreSocio.Value = row.Cells[0].Text + " - " + row.Cells[1].Text + " " + row.Cells[2].Text;
}
i tried to not use the enabled attribute for test but when the click event fires the hfidNombreSocio value in that moment is empty and the modal never closes.
maybe i'm not using the update panel right.
the text box code:
<div class="row">
<div class="col-md-4">
<asp:Label ID="lblSocio" runat="server" Visible="false" Text="Socio Cuenta Corriente" CssClass="form-label"></asp:Label>
<asp:TextBox ID="TxtSocio" runat="server" text="0" CssClass="form-control" ></asp:TextBox>
<asp:LinkButton ID="btnBuscar" runat="server" Visible="false" CssClass="btn btn-outline-success" Text="Buscar" CausesValidation="false" ToolTip="Buscar" OnClick="btnBuscar_Click" ><span class="fas fa-search"></span></asp:LinkButton> <%-- this button open the modal --%>
</div>

Ok, folks, this is one of those I wish someone corrected me!!
I am MOST HAPPY to have big buckets of egg on my face.
I have for some time preached that when you pop a dialog, you can't have post backs in that dialog. I stand MUCH corrected!!!!
So, lets build a grid, it allows a search, and then we can click on (select the row).
We have this:
<div id="hoteldialog1" style="display:normal">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Enter City Name: <asp:TextBox ID="txtSearchCity" runat="server"></asp:TextBox>
<asp:Button ID="cmdSearchCity" runat="server" Text="Search"
style="margin-left:25px" CssClass="btn" OnClick="cmdSearchCity_Click"/>
<br />
<asp:GridView ID="GridHotels" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" OnSelectedIndexChanged="GridHotels_SelectedIndexChanged"
CssClass="table">
<Columns>
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:Button ID="cmdHSel" runat="server" Text="Select"
CommandName="Select"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
So, when we run, we get/see this:
Now, in above I DID use CommmandName = "select" because I wanted the select row to work. (and I beyond hate all those extra templates). So I used this code to highlight the row.
protected void GridHotels_SelectedIndexChanged(object sender, EventArgs e)
{
// user selected this row - highlight it
int RowIX = GridHotels.SelectedIndex;
GridViewRow gRow = (GridViewRow)GridHotels.Rows[RowIX];
if ((ViewState["MySel"] != null) && ((int)ViewState["MySel"] != RowIX))
{
GridViewRow gLast = GridHotels.Rows[(int)ViewState["MySel"]];
gLast.CssClass = "";
}
gRow.CssClass = "alert-info";
ViewState["MySel"] = RowIX;
}
Ok, so far so simple. And the search button in above is this:
protected void cmdSearchCity_Click(object sender, EventArgs e)
{
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels ", conn))
{
if (txtSearchCity.Text != "")
{
// filter grid by city
cmdSQL.CommandText += " WHERE City = #City";
cmdSQL.Parameters.Add("#City", SqlDbType.NVarChar).Value = txtSearchCity.Text;
}
conn.Open();
cmdSQL.CommandText += " ORDER BY HotelName";
GridHotels.DataSource = cmdSQL.ExecuteReader();
GridHotels.DataBind();
}
}
}
Again, really simple.
Ok, now the money shot. Now the Rosetta stone. Now the beef, now the magic, now the amazing!!!
The above as noted was placed in a "div", and has a update panel.
So, now lets drop in another grid!!!
We going to display some people, and pop the above hotel selector grid!!
So, we now have this:
<asp:GridView ID="GPeople" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" >
<Columns>
<asp:BoundField DataField="Firstname" HeaderText="Firstname" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="cmdGetHotel" runat="server" Text="Hotels"
OnClick="cmdGetHotel_Click"
OnClientClick="return mypop(this);"
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadPeople();
}
void LoadPeople()
{
GPeople.DataSource = MyRst("SELECT * from People Order by FirstName");
GPeople.DataBind();
}
So we now have a grid of people. We now want to on a row click, pop up the hotel list.
So, I suggest jQuery.UI, as is much better (and cleaner then bootstrap dialog).
So we have this row click in above:
<asp:Button ID="cmdGetHotel" runat="server" Text="Hotels"
OnClick="cmdGetHotel_Click"
OnClientClick="return mypop(this);"
/>
So in above, we have both a server side button, and then a client side js function that pops up the dialog (and ONLY returns true if we hit ok.
So, now all we need is the js code to pop up the dialog. That code is this:
<script>
selok = false;
function mypop(btn) {
if (selok)
return true;
var mydiv = $("#hoteldialog1")
mydiv.dialog({
modal: true, appendTo: "form",
title: "Test dialog", closeText: "",
width: "40%",
position: { my: 'left top', at: 'right bottom', of: btn },
buttons: {
Ok: (function () {
selok = true;
btn.click()
}),
Cancel: (function () {
mydiv.dialog("close")
})
}
});
return false;
}
</script>
(set hotel grid display:none - jquery.ui will manage this).
So, now we get this:
So we are free to search, have post-backs, and of course select the row.
If the user hits ok, then the first grid button code runs. I did NOT use the selected index change event for that first grid (I could have), but I used this code:
protected void cmdGetHotel_Click(object sender, EventArgs e)
{
Debug.Print("hotel grid click");
Button btn = (Button)sender;
GridViewRow gRow = (GridViewRow)btn.Parent.Parent;
Debug.Print("Grid row = " + gRow.RowIndex);
Debug.Print("PK = " + GPeople.DataKeys[gRow.RowIndex]["ID"].ToString());
Also note, that while the pop grid is hidden? We can STILL get any data from that row, since the selected index of that grid does persist!!
eg:
GridViewRow gRow = (GridViewRow)GHotels.Rows[GHotels.SelectedIndex];
Debug.Print("Grid row = " + gRow.RowIndex);
Debug.Print("PK = " + GPeople.DataKeys[gRow.RowIndex]["ID"].ToString());
// cells collection, or find control to grab any other value
So, I think you should dump the bootstrap dialog.
Put your 2nd nice grid + searching, post backs - what ever you want into a div with a name, and use jQuery.UI to pop the grid. This will allow searching, post backs and then when the user selects the row and hits ok, then you are now free to close this dialog, and you have "index" of that pop set for you.

DropDownList inside GridView inside Repeater Control not working properly

I'm using Repeater control to generate tables on my dashboard. In the repeater, is a gridview to display item details. In the first column og the gridview is a dropdownlist to select an item and on selected index of that item, I'm fetching item details and the billing process continues for each table. Now the problem is that I'm only able to get the item details in the first repeater. Nothing happens when I select an item in another table or repeater. kindly help me with this issue.
Here is my ASPX markup:
<div class="row">
<asp:Repeater ID="rptrTables" runat="server" OnItemDataBound="rptrTables_ItemDataBound">
<ItemTemplate>
<div class="col-md-6">
<div class="card card-info">
<div class="card-header with-border">
<h3 class="card-title"><asp:Label ID="lblTableNumber" runat="server" Text='<%# Eval("TableName") %>'></asp:Label></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:GridView ID="grdOrder" runat="server" AutoGenerateColumns="false" AllowPaging="true" CssClass="table table-bordered table-hover table-responsive" GridLines="None" PageSize="10" OnRowDataBound="gvRowDataBound">
<Columns>
<asp:CommandField ShowDeleteButton="true" ControlStyle-CssClass="btn btn-danger fa fa-trash" DeleteText="" HeaderText="Remove" />
<asp:BoundField DataField="RowNumber" HeaderText="Sl. No." />
<asp:TemplateField HeaderText="Item Name">
<ItemTemplate>
<asp:DropDownList ID="drpItemname" runat="server" CssClass="form-control select2" OnSelectedIndexChanged="GetItemDetails" AutoPostBack="true"></asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:Label ID="lblUnitPrice" runat="server" Text='<%# Eval("UnitPrice")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:Label ID="lblQuantity" runat="server" Text='<%# Eval("Quantity")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Line Total">
<ItemTemplate>
<asp:Label ID="lblLineTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Add Item" ConvertEmptyStringToNull="False">
<ItemTemplate>
<asp:Button ID="ButtonAdd" runat="server" CssClass="btn btn-primary" Text="Add" OnClick="AddItem" CausesValidation="False" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="pull-right">
<asp:Button ID="btnSubmit" runat="server" CausesValidation="false" TabIndex="2" CssClass="btn btn-primary" Text="Print KOT" />
<asp:Button ID="Button1" runat="server" CausesValidation="false" TabIndex="2" CssClass="btn btn-primary" Text="Print Final Bill" />
<asp:Button ID="Button2" runat="server" CausesValidation="false" TabIndex="2" CssClass="btn btn-primary" Text="Complete Order" />
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
And my c# code to fetch item details:
protected void GetItemDetails(object sender, EventArgs e)
{
foreach(RepeaterItem rptrItems in rptrTables.Items)
{
GridView gvItems = (GridView)rptrTables.Items[0].FindControl("grdOrder");
foreach (GridViewRow row in gvItems.Rows)
{
DropDownList ddl = sender as DropDownList;
Control ctrl = row.FindControl("drpItemName") as DropDownList;
if (ctrl != null)
{
DropDownList ddl1 = (DropDownList)ctrl;
if (ddl.ClientID == ddl1.ClientID)
{
Label UnitPrice = row.FindControl("lblUnitPrice") as Label;
Label QTTY = row.FindControl("lblQuantity") as Label;
Label UPrice = row.FindControl("lblUnitPrice") as Label;
Label LINETOTAL = row.FindControl("lblLineTotal") as Label;
SqlConnection conn = new SqlConnection(constring);
conn.Open();
if (ctrl != null)
{
if ((ddl1.ID == ddl.ID) && (ddl1.SelectedIndex == ddl.SelectedIndex))
{
string str = "select * from ItemMaster where ItemName='" + ddl1.SelectedItem.ToString() + "'";
SqlCommand com = new SqlCommand(str, conn);
SqlDataReader reader = com.ExecuteReader();
while (reader.Read())
{
UnitPrice.Text = reader["UnitPrice"].ToString();
QTTY.Text = reader["Quantity"].ToString(); ;
decimal totamt = Convert.ToDecimal(QTTY.Text) * Convert.ToDecimal(UnitPrice.Text);
}
reader.Close();
conn.Close();
}
else
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "swal", "swal('Item already selected, you can increase the quantity instead!', 'warning');", true);
}
}
}
}
}
}
}

There is a problem in your code. you are always selecting the first item from the repeater control,
GridView gvItems = (GridView)rptrTables.Items[0].FindControl("grdOrder");
Change your code to get the item from foreach loop, so your code will be
GridView gvItems = (GridView)rptrItems.FindControl("grdOrder");
try to use rptrItems instead of the first item of the repeater control each time.
Hope this will help.

GridView - Client Side "WHERE" clause in the SqlDataSource?

I have a GridView with a TemplateField containing a button. This button opens up a modal window which contains another GridView as seen below:
Template Field in Gridview1:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnOpen" runat="server" Text="Show Gridview" OnClick="btnOpen_Click" data-toggle="modal" data-target="#myModal"/>
</ItemTemplate>
Modal Window:
<div class="modal" id="idModal">
<div class="container">
<div class="modal-header">
<h1>Transaction Details<a class="close-modal" href="#">×</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>
GridView2 SqlDataSource:
<asp:SqlDataSource ID="SqlgvDetail" runat="server" ConnectionString="<%$ ConnectionStrings:InventoryConnectionString %>"
SelectCommand="SELECT td.metalid , td.enddate , td.startdate , td.clientref , td.quantity FROM trxdetail td">
</asp:SqlDataSource>
Now this code works fine and opens up the modal window with the SelectCommand as expected. However, I need to add a where clause based on a row value from GridView1. E.g. ...WHERE td.clientref = GridView1.SelectedRow.Cells[0].Text
Help please!
Edit: Modal Window:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</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">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Modal JS:
$(document).ready(function () {
$("#btnOpen").click(function () {
$("#myModal").modal();
});
});

You can actually set an <asp:ControlParameter> to the SelectedValue of a GridView. I think this is what you are looking for. As the documentation says:
As a further shortcut, you can directly determine the data key value of the first key field of the selected row by using the SelectedValue property.
So what you can do is set the DataKeyNames value on GridView1 to whatever value it is that you want to use in the WHERE clause.
<asp:GridView ID="GridView1" runat="server" DataKeyNames="clientref"
...
</asp:GridView>
Then set that as the control parameter in your SqlDataSource.
<asp:SqlDataSource ID="SqlgvDetail" runat="server"
ConnectionString="<%$ ConnectionStrings:InventoryConnectionString %>"
SelectCommand="SELECT td.metalid, td.enddate, td.startdate, td.clientref , td.quantity
FROM trxdetail td
WHERE clientref=#clientref">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1"
PropertyName="SelectedValue"
Name="clientref"
Type="Whatever type clientref is" />
</SelectParameters>
</asp:SqlDataSource>
Just remember you need to make sure the row in GridView1 is actually marked as the SelectedRow. You can do this in your button click event.
protected void btnOpen_Click(object sender, EventArgs e)
{
// Find the index to select
Button btnOpen = (Button)sender;
GridViewRow row = (GridViewRow)btnOpen.NamingContainer;
int selectedIndex = row.DataItemIndex;
// Set the selected index of the GridView
GridView1.SelectedIndex = selectedIndex;
// Bind the detail GridView now that the row is selected so
// that its SqlDataSource can get a SelectedValue for the
// parent GridView
gvDetail.DataBind();
}

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

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="#">×</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.