I have the example working but I added a Select Command to the Detail grid for the purpose of selecting a detail record which will redirect to another page. The problem is that when the Select command is clicked the expanded detail grid collapses as if I had clicked the minus. The page and codebehind are:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Search1.aspx.vb" Inherits="iDCA.Search1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.Grid td
{
background-color: #A1DCF2;
color: black;
font-size: 10pt;
line-height:200%
}
.Grid th
{
background-color: #3AC0F2;
color: White;
font-size: 10pt;
line-height:200%
}
.ChildGrid td
{
background-color: #eee !important;
color: black;
font-size: 10pt;
line-height:200%
}
.ChildGrid th
{
background-color: #6C6C6C !important;
color: White;
font-size: 10pt;
line-height:200%
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divCriteria" runat="server" style="font-family:Verdana; font-size:9pt; font-weight:bold;" >
<table cellpadding="2" cellspacing="2"
style="width:50%; background-color:#E8EEFA;
border:Groove; border-color:Silver; border-width:3px;
text-align:left;">
<tr ID="T1R1" runat="server">
<td ID="T1R1C1" runat="server" width="25%">
<asp:Label ID="Label1" runat="server" Text="Search for: "></asp:Label>
<asp:RadioButtonList ID="rdoChoice" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Attorney" Value="0"></asp:ListItem>
<asp:ListItem Text="Party" Value="1"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td ID="T1R1C2" runat="server" width="65%">
<asp:Label ID="Label8" runat="server" Text="Name: "></asp:Label>
<asp:textbox ID="txtName" runat="server" Width="98%"></asp:textbox>
</td>
<td id="T1R1C3" runat="server">
<asp:Button ID="cmdSearch" runat="server" Text="Search" CssClass="style9bc" />
</td>
</tr>
</table>
</div>
<asp:GridView id="grdNames" runat="server" AutoGenerateColumns="False"
Font-Bold="true" Font-Names="verdana" Font-Size="9pt"
CellSpacing="1"
DataKeyNames="ID"
OnRowDataBound="OnRowDataBound">
<SelectedRowStyle Font-Bold="True"></SelectedRowStyle>
<AlternatingRowStyle BackColor="#E8EEFA" />
<EditRowStyle VerticalAlign="Top" Font-Bold="true" ForeColor="Black" BackColor="Gainsboro"/>
<HeaderStyle Font-Bold="True" BackColor="LightBlue" HorizontalAlign="Left" Wrap="false"></HeaderStyle>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt = "" style="cursor: pointer" src="images/plus.png" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none">
<asp:GridView ID="grdCases" runat="server" AutoGenerateColumns="false" Width="100%">
<SelectedRowStyle Font-Bold="True"></SelectedRowStyle>
<AlternatingRowStyle BackColor="#E8EEFA" />
<EditRowStyle VerticalAlign="Top" Font-Bold="true" ForeColor="Black" BackColor="Gainsboro"/>
<HeaderStyle Font-Bold="True" BackColor="LightBlue" HorizontalAlign="Left" Wrap="false"></HeaderStyle>
<Columns>
<asp:CommandField ButtonType="Image"
SelectImageUrl="~/Images/Select.jpg"
ShowSelectButton="True"
CausesValidation="false" >
<HeaderStyle BackColor="#E0E0E0" HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:CommandField>
<asp:BoundField DataField="CaseNumber" HeaderText="Case Number" />
<asp:BoundField DataField="Appellant" Headertext="Appellant" />
<asp:BoundField DataField="Appellee" Headertext="Appellee" />
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="Name" HeaderText="Name" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
CODEBEHIND:
Imports System.Data.SqlClient
Partial Public Class Search1
Inherits System.Web.UI.Page
Private Sub BindNamesGrid(ByVal sName As String)
Dim cn As New SqlConnection(System.Configuration.ConfigurationManager.AppSettings("Database"))
Dim da As SqlDataAdapter
Dim ds As New DataSet
da = New SqlDataAdapter("efp_Get_AttorneyOrParty @Name = '" & sName & "', @TypeID = " & rdoChoice.SelectedValue, cn)
da.Fill(ds, "Search")
grdNames.DataSource = ds
grdNames.DataMember = "Search"
grdNames.DataBind()
cn.Close()
End Sub
Private Shared Function GetData(ByVal iPersonID As String) As DataTable
Dim strConnString As String = System.Configuration.ConfigurationManager.AppSettings("Database")
Using cn As New SqlConnection(strConnString)
Using cmd As New SqlCommand()
cmd.CommandText = "efp_Get_Cases @PersonID = " & iPersonID
Using da As New SqlDataAdapter()
cmd.Connection = cn
da.SelectCommand = cmd
Using ds As New DataSet()
Dim dt As New DataTable()
da.Fill(dt)
Return dt
End Using
End Using
End Using
End Using
End Function
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub cmdSearch_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdSearch.Click
BindNamesGrid(txtName.Text.Trim)
End Sub
Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim PersonID = grdNames.DataKeys(e.Row.RowIndex).Value.ToString()
Dim grdCases As GridView = TryCast(e.Row.FindControl("grdCases"), GridView)
grdCases.DataSource = GetData(PersonID)
grdCases.DataBind()
End If
End Sub
End Class
