Nested GridView - GridView Inside Another GridView Show in Asp.Net C#

03:17:00  , , , , , ,  No comments

Nested GridView - GridView Inside Another GridView Show

Gridview Show Data's Inside Another Gridview Show Sub Details Called Nested Gridview in Asp.net C#.

                  Download Coding  
                       Download

                         DEMO



                       HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                  
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="None" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" ShowFooter="True">
            <AlternatingRowStyle BackColor="#9999FF" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
       <asp:ImageButton ID="ImageButton1"
                      runat="server" CommandName="Select"
   Height="16px" ImageUrl="~/Plus.png" OnClick="ImageButton1_Click"
                            style="width: 14px" Width="23px" />
                        &nbsp;<asp:ImageButton ID="ImageButton2" runat="server" Height="16px"
     ImageUrl="~/minus.png" OnClick="ImageButton2_Click" 
         Visible="False" Width="16px" />
                        <br />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Continent ID">
                    <ItemTemplate>
                 <asp:Label ID="lblContinentID" runat="server"
                   Text='<%# Eval("continent_id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contient Name">
                    <ItemTemplate>
               <asp:Label ID="lblContientName" runat="server"
                   Text='<%# Eval("continent_name") %>'></asp:Label>
                        <br />
                        <br />
                        <asp:Panel ID="Panel1" runat="server">
      <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
                                 GridLines="None" >
                          <AlternatingRowStyle BackColor="#9999FF" />
                                <Columns>
        <asp:BoundField DataField="country_id" HeaderText="Country ID" />
     <asp:BoundField DataField="continent_id" HeaderText="Continent ID" />
     <asp:BoundField DataField="country_name" HeaderText="Country Name" />
                                </Columns>
                                <HeaderStyle BackColor="#FF3300" />
                                <RowStyle BackColor="#FF99FF" />
                            </asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <HeaderStyle BackColor="#FF3300" />
            <RowStyle BackColor="Silver" />
        </asp:GridView> 
         
       </div>
    </form>
</body>
</html>


                      
                   C# CODING
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 Nested : System.Web.UI.Page
{

    SqlConnection con;
    SqlCommand cmd;
    SqlDataAdapter adp;
    SqlDataReader rd;
    DataSet ds;
    string query;

    public void dbcon()
    {
        string connn = (System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        con = new SqlConnection(connn);
        con.Open();

    }

    protected void Page_Load(object sender, EventArgs e)
    {


        if (!IsPostBack)
        {

            bind1();

        }

    }

    protected void bind1()
    {
        dbcon();
        query = "select * from continent";
        cmd = new SqlCommand(query, con);
        adp = new SqlDataAdapter(cmd);
        ds = new DataSet();
        adp.Fill(ds);
        rd = cmd.ExecuteReader();
        if (ds.Tables[0].Rows.Count > 0)
        {
            GridView1.DataSource = ds;
            GridView1.DataBind();

        }


        else
        {
            ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
            GridView1.DataSource = ds;
            GridView1.DataBind();
            int columncount = GridView1.Rows[0].Cells.Count;
            GridView1.Rows[0].Cells.Clear();
            // GridView1.FooterRow.Cells.Clear();
            GridView1.Rows[0].Cells.Add(new TableCell());
            GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
            GridView1.Rows[0].Cells[0].Text = "No Records Found";
        }
    }
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
    {

        GridView gv = (GridView)GridView1.SelectedRow.FindControl("GridView2");

        ImageButton im1 = (ImageButton)GridView1.SelectedRow.FindControl("ImageButton2");
        im1.Visible = true;

        ImageButton im = (ImageButton)GridView1.SelectedRow.FindControl("ImageButton1");
        im.Visible = false;
   
        Panel pp = (Panel)GridView1.SelectedRow.FindControl("Panel1");
        pp.Visible = true;

        Label continentid = (Label)GridView1.SelectedRow.FindControl("lblContinentID");

        dbcon();
        query = "select * from country where 
           continent_id='" +continentid.Text + "'";
        cmd = new SqlCommand(query, con);
        adp = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        adp.Fill(dt);
        rd = cmd.ExecuteReader();
        if (rd.Read())
        {
            gv.DataSource = dt;
            gv.DataBind();
        }
    }

 protected void ImageButton2_Click(object sender, ImageClickEventArgs e)
    {
        Panel pp = (Panel)GridView1.SelectedRow.FindControl("Panel1");
        pp.Visible = false;

        ImageButton im1 = (ImageButton)GridView1.SelectedRow.FindControl("ImageButton1");
        im1.Visible = true;

        ImageButton im = (ImageButton)GridView1.SelectedRow.FindControl("ImageButton2");
        im.Visible = false;
    } 
   
}



First Create The New Web Form  - Add The GridView   -  Create DataBase Table 





Next - Create DataBase Table  




Next - Create Another DataBase Table  - Previous Table Id  Call This Table  for Child Table





Next - Select GridView  - Edit Column 







Add TemplteeFields  - Add Header Text For DataBase Related Table Name






Next - Select - Edit Template - Add Image Button - Image Add (+ Image)





Next - Select - Edit Template - Add Image Button - Image Add (- Image)





 Next - Select Id Column  - Bind Data - Change Label ID





Next - Add The Continent Name Column  - Bind Data








Next - Add Child GridView For GridView Item Templates Inside Panel




Next - Bind Data To Child GridView All Table Fields




Next - Select Child GridView Edit Item -  Add BoundField - Change Header Text & DataFields 







Next - Add BoundField - Change Header Text & DataFields 




Next - Add BoundField - Change Header Text & DataFields 






Show The Html Coding For Nested GridView 









Next - Code Behind  - Add the NameSpaces & DataBase Connection







Next - Select Table Values  




Next  - Add The GridView  Selected IndexChanged  Get The Row Values Perform Action




Next - Image Button Show & Hide Action 






Next - Run[F5] the Program -  Select GridView - Show Nested GridView









0 comments:

Post a Comment