Hope this will help you.I Have included the ASP.NET code for you.
public class Master
{
public Master()
{
}
public int Id { get; set; }
public string PrimaryMember { get; set; }
public string Gender { get; set; }
}
public class Details
{
public Details()
{
}
public int Id { get; set; }
public string DependentMember { get; set; }
public string Gender { get; set; }
public int MasterId { get; set; }
}
public static class GridRepository
{
public static List<Master> GetMasters()
{
var masters = new List<Master>
{
new Master{Id=1,PrimaryMember="VijaiAnand",Gender="Male"},
new Master{Id=2,PrimaryMember="BalaSundar",Gender="Male"}
};
return masters;
}
public static List<Details> GetDetails()
{
var Details = new List<Details>
{
new Details{Id=1,DependentMember="cera",Gender="Female",MasterId=1},
new Details{Id=2,DependentMember="John",Gender="Male",MasterId=1},
new Details {Id=3,DependentMember="Srini",Gender="Male",MasterId=2}
};
return Details;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:gridview ID="Gridview1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound" DataKeyNames="Id">
<Columns>
<asp:TemplateField HeaderText="DetailsGrid">
<ItemTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="DependentMember" HeaderText="DependentMember" />
<asp:BoundField DataField="Gender" HeaderText="Gender" />
</Columns>
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="PrimaryMember" HeaderText="PrimaryMember" />
<asp:BoundField DataField="Gender" HeaderText="Gender" />
</Columns>
</asp:gridview>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindMasterGrid();
}
}
protected void BindMasterGrid()
{
var masters = GridRepository.GetMasters();
Gridview1.DataSource = masters;
Gridview1.DataBind();
}
protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{
int masterId = 0;
if (e.Row.RowType == DataControlRowType.DataRow)
{
masterId = Convert.ToInt32(Gridview1.DataKeys[e.Row.RowIndex].Value);
GridView grdDetails = e.Row.FindControl("GridView2") as GridView;
if (grdDetails != null)
{
grdDetails.DataSource = GridRepository.GetDetails().Where(id => id.MasterId == masterId);
grdDetails.DataBind();
}
}
}
}
You have to Include the logic for + image control inside that Gridview1 and toggle that via JavaScript.