Nested Gridview Example in Asp.net OR Gridview inside Gridview in asp.net

Introduction: In this article I have explain how we can use Gridview inside Gridview in asp.net.
Nested Gridview

Description:
In the last article i have explained How to use Checkbox control inside Gridview in asp.net and How to use Join in LINQ Query.
To explain example  I have create 3 Table COUNTRY_DETAIL
ID
int
COUNTRY
varchar(50)
CAPITAL
varchar(50)

STATE_DETAIL
ID
int
STATE_NAME
varchar(50)
POPULATION
bigint
COUNTRY_ID_FK
int

STATE_POPULATION
ID
int
MALE
bigint
FEMALE
bigint
STATE_ID_FK
int


Add a new webform to project. Drag and drop the controls from Toolbox and desgin the .aspx page as mention below:
<table align="center"><tr><td>
        <asp:GridView ID="gvcountry" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="#3DB8E4" HeaderStyle-ForeColor="White"
            DataSourceID="SqlDataSource1" onrowdatabound="gvcountry_RowDataBound"
            DataKeyNames="ID" EmptyDataText="No records found">
            <RowStyle BackColor="#E1E1E1" />
<AlternatingRowStyle BackColor="White" />
        <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <img alt = "" style="cursor: pointer" src="images/plus.png" />
                 <div Style="display: none">
                    <asp:GridView ID="gvstate" runat="server" HeaderStyle-BackColor="#3B5998" HeaderStyle-ForeColor="White" AutoGenerateColumns="false" EmptyDataText="No records found" DataKeyNames="ID" CssClass = "ChildGrid" onrowdatabound="gvstate_RowDataBound">                   
                       <RowStyle BackColor="#E2FFFF" />
<AlternatingRowStyle BackColor="White" />
                        <Columns>
                            <asp:TemplateField>
                            <ItemTemplate>
                             <img alt = "" style="cursor: pointer" src="images/plus.png" />
                              <div Style="display: none">
                              <asp:GridView ID="gvpopulation"  HeaderStyle-BackColor="Goldenrod" HeaderStyle-ForeColor="White" DataKeyNames="ID" runat="server" AutoGenerateColumns="false" EmptyDataText="No records found">
                              <Columns>
                              <asp:BoundField ItemStyle-Width="150px" DataField="MALE" HeaderText="Male" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="FEMALE" HeaderText="Female" />
                              </Columns>
                               <EmptyDataRowStyle Width = "550px" ForeColor="Red" Font-Bold="true"
   HorizontalAlign = "Center"/>
                              </asp:GridView>
                              </div>
                            </ItemTemplate>                          
                            </asp:TemplateField>
                             <asp:BoundField ItemStyle-Width="150px" DataField="STATE_NAME" HeaderText="State Name" />
                            <asp:BoundField ItemStyle-Width="150px" DataField="POPULATION" HeaderText="Population" />
                        </Columns>
                          <EmptyDataRowStyle Width = "550px" ForeColor="Red" Font-Bold="true"
   HorizontalAlign = "Center" />
                    </asp:GridView>
                    </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField ItemStyle-Width="150px" DataField="COUNTRY" HeaderText="Country Name" />
        <asp:BoundField ItemStyle-Width="150px" DataField="CAPITAL" HeaderText="Capital" />    
    </Columns>
     <EmptyDataRowStyle Width = "550px" ForeColor="Red" Font-Bold="true"
   HorizontalAlign = "Center"/>
        </asp:GridView></td></tr></table>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:TEST_APPLICATIONConnectionString %>"
            SelectCommand="SELECT * FROM [COUNTRY_DETAIL]"></asp:SqlDataSource>

Add the below given Javascript in between Head Tag:
<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", "images/minus.png");
    });
    $("[src*=minus]").live("click", function () {
        $(this).attr("src", "images/plus.png");
        $(this).closest("tr").next().remove();
    });
</script>

Note: Please do not forget to add ConnectionString in web.config file:
<connectionStrings>
    <add name="con" connectionString="Data Source=SYS-1F78031ED0A;Initial Catalog=TestBlog;Integrated Security=True" /> 


  </connectionStrings>

After that on .aspx.cs page write the below given code:
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ToString());
//Bind STATE_DETAIL Table to State Gridview on Country RowDataBound Event
    protected void gvcountry_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            int id = Convert.ToInt32(gvcountry.DataKeys[e.Row.RowIndex].Value.ToString());
            GridView gvstatechild = (GridView)e.Row.FindControl("gvstate");
            SqlDataAdapter adp = new SqlDataAdapter("Select * from STATE_DETAIL WHERE C_ID_FK="+id, con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            gvstatechild.DataSource = dt;
            gvstatechild.DataBind();          
          
        }
    }
    // Bind STATE_POPULATION Table to Population Gridview on State RowDataBound Event
    protected void gvstate_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            GridView gvstate = (GridView)sender;
            int id = Convert.ToInt32(gvstate.DataKeys[e.Row.RowIndex].Value.ToString());
            GridView gvchild = (GridView)e.Row.FindControl("gvpopulation");
            SqlDataAdapter adp = new SqlDataAdapter("Select * from STATE_POPULATION where STATE_ID_FK=" + id, con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
             gvchild.DataSource = dt;
            gvchild.DataBind();
        }
    }

In VB (.aspx.vb)
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("Connection").ToString())
    Protected Sub gvcountry_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvcountry.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim id As Integer = Convert.ToInt32(gvcountry.DataKeys(e.Row.RowIndex).Value.ToString())
            Dim gvstatechild As GridView = DirectCast(e.Row.FindControl("gvstate"), GridView)
            Dim adp As New SqlDataAdapter("Select * from STATE_DETAIL WHERE C_ID_FK=" & id, con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            gvstatechild.DataSource = dt

            gvstatechild.DataBind()
        End If
    End Sub
    Protected Sub gvstate_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim gvstate As GridView = DirectCast(sender, GridView)
            Dim id As Integer = Convert.ToInt32(gvstate.DataKeys(e.Row.RowIndex).Value.ToString())
            Dim gvchild As GridView = DirectCast(e.Row.FindControl("gvpopulation"), GridView)
            Dim adp As New SqlDataAdapter("Select * from STATE_POPULATION where STATE_ID_FK=" & id, con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            gvchild.DataSource = dt
            gvchild.DataBind()
        End If
    End Sub

Bulid and run the project.

Is it helpful?

If yes post your comment to admire my work. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget