Categories
Asp, Asp.net

Nested GridView Example In Asp.Net

ModalPopUp Extender Example in Asp.Net

Nested GridView Example In Asp.Net – Gridview Inside Gridview

In this tutorial we will explain you Nested GridView Example In Asp.Net or Gridview Inside Gridview.To get this functionality we are using javascript too.

Here we are using two tables.

1. Department  2. Employee

On First level we are displaying Department Number and Department Name.And when we click on Department Number all employee of that Department Number will be displayed into child Gridview.

Design View:

<%@ 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>Nested GridView Example</title>
<script type="text/javascript">
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "inline";
img.src = "open.gif";
} else {
div.style.display = "none";
img.src = "closed.gif";
}
}
</script>
</head>
<center>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="Deptno" CellPadding="4" ForeColor="#333333" GridLines="None" >
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField ItemStyle-Width="20px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("deptno") %>');">
<img id='imgdiv<%# Eval("deptno") %>' border="0" src="closed.gif" />
</a>
</ItemTemplate>
<ItemStyle Width="20px"></ItemStyle>
</asp:TemplateField>
<asp:BoundField DataField="deptno" HeaderText="Dept Number">
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:BoundField>
<asp:BoundField DataField="dname" HeaderText="Dept Name" >
<HeaderStyle HorizontalAlign="Left"></HeaderStyle>
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<tr>
<td style="width:auto">
<div id='div<%# Eval("deptno") %>' style="display: none; position: relative; left: 15px; overflow: auto">
<asp:GridView ID="gvnested" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ename" HeaderText="Employee Name"/>
<asp:BoundField DataField="job" HeaderText="Job"/>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
</asp:GridView>
</div>
</form>
</body>
</center>
</html>

Code View:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Data Source=hightechnology;Integrated Security=true;Initial Catalog=session");
    protected void Page_Load(object sender, EventArgs e)
    {
            if (!IsPostBack)
            {
            BindGridview();
            }
    }
    
    protected void BindGridview()
    {
            con.Open();
            SqlCommand cmd = new SqlCommand("select deptno,dname from dept", con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            con.Close();
            GridView1.DataSource = ds;
            GridView1.DataBind();

    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            con.Open();
            GridView GridView2 = (GridView)e.Row.FindControl("gvnested");
            int deptno = Convert.ToInt32(e.Row.Cells[1].Text);
            SqlCommand cmd = new SqlCommand("select * from emp where deptno=" + deptno, con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            con.Close();
            GridView2.DataSource = ds;
            GridView2.DataBind();
        }
    }
}

3 replies on “Nested GridView Example In Asp.Net”

Nice blog here! Also your website loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol

I am not sure where you’re getting your information, but good topic. I needs to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this info for my mission.

Comments are closed.