how to use grid within grid in asp.net example

-

Gird into gridview in Asp.net,Nested grid Example:



 In this post we consider an Example by which we take Nested GridView in ASP.NET .Some time the developer search this Question by fallowing way (Related Questions).
  • How to get grid in to templatefield
  • Gridview inside gridview in asp.net
  • Multilevel nested GridView in ASP.NET using c# 
  • ASP.Net Nested GridViews

How to Use grid with in grid control:

<asp:TemplateField ItemStyle-HorizontalAlign="Center" Visible="true">
    <ItemTemplate>
        <tr>
      <td colspan="100%" align="center">
       <div id="div<%# Eval("StateID") %>" style="overflow: auto; display: none; position: relative;
          left: 15px; overflow: auto">
          <asp:GridView ID="GridwithinGrid" runat="server" Width="60%" orizontalAlign="Center"   RowStyle-HorizontalAlign="Center">                                           
                                               
             </asp:GridView>
        </div>
   </ItemTemplate>
</asp:TemplateField>

How to take one server control in to another control. Etc

Here we are trying to give an Example for solving to these questions regarding to Gridview.


Create two related table one for state names and second for city of particular state like as:



Fill data into these tables for binding grid view:



How to take gridview in to gridview TemplateField,Example of grid control into asp.net grid: 

Code for default.aspx page for Grid Example:

<%@ 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>
    <script language="javascript" 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 = "minus.gif";
            } else {
                div.style.display = "none";
                img.src = "plus.gif";
            }
        }

        function divexpandcollapseChild(divname) {
            var div1 = document.getElementById(divname);
            var img = document.getElementById('img' + divname);
            if (div1.style.display == "none") {
                div1.style.display = "inline";
                img.src = "minus.gif";
            } else {
                div1.style.display = "none";
                img.src = "plus.gif"; ;
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
            Width="508px" Height="194px" 
            onrowdatabound="GridView1_RowDataBound">
        <Columns>            
        <asp:TemplateField ItemStyle-Width="20px">
                            <ItemTemplate>
                                <a href="JavaScript:divexpandcollapse('div<%# Eval("StateID") %>');">
                        <img id="imgdiv<%# Eval("StateID") %>" width="9px" border="0" src="plus.gif"
                                        alt="" /></a>
                            </ItemTemplate>
                            <ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="SNo" ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <%#Container.DataItemIndex+1 %>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center"></ItemStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:Label ID="lblStateID" runat="server" Text='<%# Eval("StateID") %>'></asp:Label>
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("StateName") %>'></asp:Label>
                            </ItemTemplate>
                            <ItemStyle HorizontalAlign="Center"></ItemStyle>
                        </asp:TemplateField>
        <asp:TemplateField ItemStyle-HorizontalAlign="Center" Visible="true">
                            <ItemTemplate>
                                <tr>
                                    <td colspan="100%" align="center">
                                        <div id="div<%# Eval("StateID") %>" style="overflow: auto; display: none; position: relative; left: 15px; overflow: auto">  
<asp:GridView ID="GridwithinGrid" runat="server" Width="60%" HorizontalAlign="Center"
                                                RowStyle-HorizontalAlign="Center">                                           
                                               
                                            </asp:GridView>
                                        </div>
                            </ItemTemplate>
                        </asp:TemplateField>       
              </Columns>
        </asp:GridView>   
    </div>
    </form>
</body>
</html>

Code for Default.aspx.cs page for Asp.net Grid:

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

public partial class _Default : System.Web.UI.Page
{
    string _connectionstring;
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
           _connectionstring = @"Data Source=PARIJAT-PC\PARIJAT;Initial Catalog=Database1;Integrated Security=True;Pooling=False";
            BindData();
        }
    }

    private void BindData()
    {
        try
        {           
            string _sql = "select StateID,StateName from States";
            SqlConnection _connection = new SqlConnection(_connectionstring);
            SqlCommand _command = new SqlCommand(_sql, _connection);
            SqlDataAdapter _adapter = new SqlDataAdapter(_command);
            DataTable datatable = new DataTable();
            _adapter.Fill(datatable);

            GridView1.DataSource = datatable;
            GridView1.DataBind();            
        }
        catch
        {
            throw;
        }
    }   
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            try
            {
                DataRow row = ((DataRowView)e.Row.DataItem).Row;
                Label lblStateID = (Label)e.Row.FindControl("lblStateID");
                GridView GridwithinGrid = (GridView)e.Row.FindControl("GridwithinGrid");
                string _sql = "SELECT CityID,CityName FROM City WHERE StateID = '"+lblStateID.Text+"'";
                SqlConnection _connection = new SqlConnection(_connectionstring);
                SqlCommand _command = new SqlCommand(_sql, _connection);
                SqlDataAdapter _adapter = new SqlDataAdapter(_command);
                DataTable datatable1 = new DataTable();
                _adapter.Fill(datatable1);
                GridwithinGrid.DataSource = datatable1;
                GridwithinGrid.DataBind();
            }
            catch (Exception ex)
            {

            }
        }
    }
}

 
grid within grid in asp.net programming
Grid within grid in asp.net programming 

 Asp.Net Gridview Related Post:

Comments

Post a Comment