Introduction : Nested gridview means gridview within a gridview. this example will show you how we can do this and by clicking on parent gridview's row we will show the child gridview.
Database : For this I am using a employee table and the structure of this employee table is as follows:
CREATE TABLE [dbo].[employee](
[id]
[int] IDENTITY(1,1) NOT NULL,
[name]
[nvarchar](200)
NULL,
[designation]
[nvarchar](200)
NULL,
[salary]
[float] NULL,
[manager]
[int] NULL
) ON [PRIMARY]
I have inserted some dummy data to this table as -
Design: I have designed a gridview for this and put another child gridview in parent gridview. The design of this is as below :
<asp:GridView ID="gvdetails" runat="server" Width="100%" AutoGenerateColumns="false" onmousehover="this.row.select();" OnRowCreated="gridclass_RowCreated"
onselectedindexchanged="gvdetails_SelectedIndexChanged">
<Columns>
<asp:BoundField HeaderText="ID" DataField="id" HeaderStyle-Font-Bold="true" />
<asp:BoundField HeaderText="Name" DataField="name" HeaderStyle-Font-Bold="true" />
<asp:BoundField HeaderText="Designation" DataField="designation" HeaderStyle-Font- Bold="true" />
<asp:BoundField HeaderText="Salary" DataField="salary" HeaderStyle-Font-Bold="true" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="12">
<asp:GridView ID="gvChildGrid" runat="server" CssClass="EU_DataTable1" AutoGenerateColumns="false" Width="100%" BackColor="Gray" Visible="false">
<Columns>
<asp:BoundField HeaderText="Jounior Name" DataField="name" HeaderStyle-HorizontalAlign="Center" />
</Columns>
</asp:GridView>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Code Behind:
To bind the parent gridview I have created a function and called it on the Page_Load() event of the page. The function is as follows -
public void bindmain()
{
SqlDataAdapter da = new SqlDataAdapter("select * from
employee", con);
DataTable dt = new DataTable();
da.Fill(dt);
gvdetails.DataSource = dt;
gvdetails.DataBind();
}
Now for further action I have executed some events of parent Gridview as follows :
1. Row_Created - This will design the row of parent gridview:
protected void gridclass_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='none';
this.style.background='#61CFB3'";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';
this.style.background='White'";
e.Row.ToolTip = "Click to select row";
e.Row.Attributes["onclick"] = this.Page.ClientScript.GetPostBackClientHyperlink(this.gvdetails, "Select$" +
e.Row.RowIndex, true);
}
}
2. SelectedIndexChanged Event : This event will be fired when the parent gridview's row is clicked :
protected void gvdetails_SelectedIndexChanged(object sender, EventArgs e)
{
int index = gvdetails.SelectedRow.RowIndex;
string id = gvdetails.Rows[index].Cells[0].Text.Trim();
GridView gv = (GridView)gvdetails.Rows[index].FindControl("gvChildGrid");
if (gv.Visible == true)
{
gv.Visible = false;
}
else
{
SqlDataAdapter da = new SqlDataAdapter("select * from
employee where manager = '" + id + "'", con);
DataTable dt = new DataTable();
da.Fill(dt);
gv.DataSource = dt;
gv.DataBind();
gv.Visible = true;
}
}
Note : Put this on the page decleration part of the webpage :
EnableEventValidation="false"
Download The Sample
Here...
Safe Coding.......
