Binding nested gridview and work with nested gridview is something different than normal gridview. Here I want to bind nested gridview means Gridview inside Gridview.In this post we will dynamically bind both gridviews parent gridview and nested gridview.
In my previous post "How to Dynamically Bind A Gridview From Database" i had explained that how to bind gridview at run time. Here in this example i have binded both gridviews dynamically.
In this post we are creating like this; There is one Image in Outer Grid when you click that image nested grid will be displayed and when press that image again nested grid will be hided.
Here i have used two image which is swapped using Java script and jquery to change the image according to nested grid is open or close. Here in this example when nested grid is open minus sign image and when closed Plus Sign image is displayed.
In this example nested gridview will be binded with parent gridview on RowDataBound event of parent grid view. And i'm using Another template field of ID to identify row of nested grid view.
Here is the Image Hoe it Looks Like:-
Parent Table
Child Table
In my previous post "How to Dynamically Bind A Gridview From Database" i had explained that how to bind gridview at run time. Here in this example i have binded both gridviews dynamically.
In this post we are creating like this; There is one Image in Outer Grid when you click that image nested grid will be displayed and when press that image again nested grid will be hided.
Here i have used two image which is swapped using Java script and jquery to change the image according to nested grid is open or close. Here in this example when nested grid is open minus sign image and when closed Plus Sign image is displayed.
In this example nested gridview will be binded with parent gridview on RowDataBound event of parent grid view. And i'm using Another template field of ID to identify row of nested grid view.
Here is the Image Hoe it Looks Like:-
Here is my tables
Parent Table
| efname | nvarchar(50) | Unchecked |
| ID | int | Unchecked |
| elname | nvarchar(50) | Unchecked |
| eadd | nvarchar(50) | Unchecked |
| ephone | nvarchar(50) | Unchecked |
Child Table
| id | int | Unchecked |
| Project | nvarchar(50) | Unchecked |
Source Code in asp.net:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
.style1 {
width: 100%;
}
</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", "minus.jpeg");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "plus.jpeg");
$(this).closest("tr").next().remove();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<table class="style1">
<tr>
<td align="center">
<h2>Nested Gridview Bind</h2>
</td>
</tr>
<tr>
<td align="center">
<asp:GridView ID="pgridview" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None" OnRowDataBound="pgridview_RowDataBound" DataKeyNames="ID">
<AlternatingRowStyle BackColor="White" ForeColor="#284775"/>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#41B7D8" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img alt="" style="cursor: pointer" height="20px" width="20px" src="plus.jpeg" />
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<asp:GridView ID="ngridview" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"
AutoGenerateColumns="False" BorderColor="#41B7D8">
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#41B7D8" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderText="id">
<ItemTemplate>
<asp:Label ID="lblid" runat="server" Text='<%#Eval("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Projects">
<ItemTemplate>
<asp:Label ID="lproject" runat="server" Text='<%#Eval("Project") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lpid" runat="server" Text='<%#Eval("ID")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EMP_FIRSTNAME">
<ItemTemplate>
<asp:Label ID="lfname" runat="server" Text='<%#Eval("efname")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EMP_LASTNAME">
<ItemTemplate>
<asp:Label ID="llname" runat="server" Text='<%#Eval("elname") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ADDRESS">
<ItemTemplate>
<asp:Label ID="ladd" runat="server" Text='<%#Eval("eadd") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="PHONE NO">
<ItemTemplate>
<asp:Label ID="lphone" runat="server" Text='<%#Eval("ephone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</form>
</body>
</html>
Code in C#:-
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;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(@"Data Source=SQLDB;Initial Catalog=Demo;Persist Security Info=True;User ID=Demoh;Password=Demo1@");
con.Open();
string q = "select * from Employee_tbl";
SqlDataAdapter adpter = new SqlDataAdapter(q, con);
DataTable dt = new DataTable();
adpter.Fill(dt);
pgridview.DataSource = dt;
pgridview.DataBind();
con.Close();
}
protected void pgridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label id = (Label)e.Row.FindControl("lpid"); // Id of the parent grid record to Identifiy related recors in child table
GridView gr = (GridView)e.Row.FindControl("ngridview");
SqlConnection con = new SqlConnection(@"Data Source=SQLDB;Initial Catalog=Demo;Persist Security Info=True;User ID=Demoh;Password=Demo1@");
con.Open();
// string q = "select * from Emp";
string q1 = "select id,Project from Employ_Salary where id="+id.Text;
// SqlDataAdapter adpter = new SqlDataAdapter(q, con);
SqlDataAdapter ad1 = new SqlDataAdapter(q1, con);
DataTable dt1 = new DataTable();
// DataTable dt = new DataTable();
ad1.Fill(dt1);
gr.DataSource = dt1;
gr.DataBind();
con.Close();
}
}
}
Post a Comment