I have comeacross some of friends needed this code to create parent and child combination in the webpage.
So thought of sharing them have created sample code for displaying the parent and child combination.
I am using Parent control as a Repeater control and child as a Gridview control.
Please go throgh the example:
Aspx Code:
<asp:Repeater ID="grdMulti" runat="server" OnItemDataBound="grdMulti_RowDataBound">
<ItemTemplate>
<table width="100%" border="1" style="border-style:solid">
<tr>
<td>
<table width="100%">
<tr>
<td>
<img id="imgExpand" runat="server" src="Image/add_up.gif" onclick="javascript:showChild(this)"
style="vertical-align: top" />
<img id="imgCollapse" runat="server" src="Image/del_up.gif" onclick="javascript:showChild(this)"
style="display: none; vertical-align: top" />
</td>
<td>
<asp:Label ID="lblServiceAddress" runat="server" Text='<%# Eval("ServiceId") %>'></asp:Label>
</td>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ServiceName") %>'></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("ServiceAddress") %>'></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
<tr id="ShowRow" runat="server" style="display:none">
<td>
<table width="100%">
<tr>
<td>
<div id="Show" runat="server" style="display: none">
<asp:GridView ID="grdChild" runat="server" Width="100%">
</asp:GridView>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
Javscript:
<script language="javascript">
function showChild(obj) {
var imgId = obj.id, grdId, grdObj, objImg = document.getElementById(imgId), imgChangeId, imgChangeObj, rowid;
if (obj.id.indexOf('Expand') > 0) {
grdId = obj.id.replace('imgExpand', 'Show');
rowid = obj.id.replace('imgExpand', 'ShowRow');
imgChangeId = obj.id.replace('imgExpand', 'imgCollapse');
imgChangeObj = document.getElementById(imgChangeId);
grdObj = document.getElementById(grdId);
rowobj=document.getElementById(rowid);
if (objImg != null) {
objImg.style.display = 'none'
}
if (grdObj != null) {
grdObj.style.display = 'block'
}
if (imgChangeObj != null) {
imgChangeObj.style.display = 'block';
}
if (rowobj != null) {
rowobj.style.display = 'block';
}
}
else {
grdId = obj.id.replace('imgCollapse', 'Show');
rowid = obj.id.replace('imgExpand', 'ShowRow');
imgChangeId = obj.id.replace('imgCollapse', 'imgExpand');
imgChangeObj = document.getElementById(imgChangeId);
grdObj = document.getElementById(grdId);
rowobj = document.getElementById(rowid);
if (grdObj != null) {
grdObj.style.display = 'none'
}
if (objImg != null) {
objImg.style.display = 'none'
}
if (imgChangeObj != null) {
imgChangeObj.style.display = 'block';
}
if (rowobj != null) {
rowobj.style.display = 'none';
}
}
}
</script>
C#
public partial class MultiGrid : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable DTParent = new DataTable();
DataColumn dc1 = new DataColumn("ServiceId");
DataColumn dc2 = new DataColumn("ServiceName");
DataColumn dc3 = new DataColumn("ServiceAddress");
DTParent.Columns.Add(dc1);
DTParent.Columns.Add(dc2);
DTParent.Columns.Add(dc3);
DataRow DR = null;
for (int i = 0; i <>
{
DR = DTParent.NewRow();
DR[0] = i.ToString();
DR[1] = "bal";
DR[2] = "Address";
DTParent.Rows.Add(DR);
}
grdMulti.DataSource = DTParent;
grdMulti.DataBind();
}
}
protected void grdMulti_RowDataBound(object sender, RepeaterItemEventArgs e)
{
GridView GRDChild = (GridView)e.Item.FindControl("grdChild");
if (GRDChild != null)
{
DataTable DTChild = new DataTable();
DataColumn dc1 = new DataColumn("ServiceId");
DataColumn dc2 = new DataColumn("ServiceName");
DataColumn dc3 = new DataColumn("ServiceAddress");
DTChild.Columns.Add(dc1);
DTChild.Columns.Add(dc2);
DTChild.Columns.Add(dc3);
DataRow DR = null;
for (int i = 0; i <>
{
DR = DTChild.NewRow();
DR[0] = i.ToString();
DR[1] = "bal";
DR[2] = "Address";
DTChild.Rows.Add(DR);
}
GRDChild.DataSource = DTChild;
GRDChild.DataBind();
}
}
}
