[go: up one dir, main page]
Scribd
Upload
117 views7 pages

Gridview Inside Gridview

The document describes how to create a GridView control that contains another GridView control to display hierarchical data. It involves: 1. Creating Country and State database tables 2. Using a GridView control bound to the Country table to display countries 3. Adding a GridView inside a template field of the outer GridView to display the states for each country 4. Writing code to dynamically bind the inner GridView to retrieve the correct states for each country row.

Uploaded by

Priyanka Chauhan
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
117 views7 pages

Gridview Inside Gridview

The document describes how to create a GridView control that contains another GridView control to display hierarchical data. It involves: 1. Creating Country and State database tables 2. Using a GridView control bound to the Country table to display countries 3. Adding a GridView inside a template field of the outer GridView to display the states for each country 4. Writing code to dynamically bind the inner GridView to retrieve the correct states for each country row.

Uploaded by

Priyanka Chauhan
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

GRIDVIEW INSIDE GRIDVIEW

1) We need to create two tables Country and State a) Country table

b) State Table

2) Source coding part


<head runat="server"> <title>GridView Inside GridView</title> <script language="javascript" type="text/javascript"> function expand(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"; } } </script> </head> <body> <form id="form1" runat="server"> <div align="center" style="font-size: medium; font-weight: bold; color: #000000; border: thin groove #000000"> <br /> GridView Inside GridView<br /> <asp:GridView ID="gvParentGrid" runat="server" DataKeyNames="CountryId" Width="500" AutoGenerateColumns="false" OnRowDataBound="gvUserInfo_RowDataBound" GridLines="None" BorderStyle="Solid" BorderWidth="1px" BorderColor="#df5015"> <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /> <RowStyle BackColor="#E1E1E1" /> <AlternatingRowStyle BackColor="White" /> <HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" /> <Columns> <asp:TemplateField ItemStyle-Width="20px"><ItemTemplate> <a href="JavaScript:expand('div<%# Eval("CountryID") %>');"> <img id="imgdiv<%# Eval("CountryID") %>" width="9px" border="0" src="plus.gif" /></a> </ItemTemplate><ItemStyle Width="20px"></ItemStyle></asp:TemplateField> <asp:BoundField DataField="CountryID" HeaderText="CountryId" HeaderStyleHorizontalAlign="Left" ><HeaderStyle HorizontalAlign="Left"></HeaderStyle></asp:BoundField> <asp:BoundField DataField="CountryName" HeaderText="CountryName" HeaderStyleHorizontalAlign="Left" ><HeaderStyle HorizontalAlign="Left"></HeaderStyle></asp:BoundField> <asp:TemplateField><ItemTemplate> <tr><td colspan="100%"> <div id="div<%# Eval("CountryID") %>" style="display: none; position: relative; left: 15px; overflow: auto">

<asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false" BorderStyle="Double" BorderColor="#df5015" GridLines="None" Width="450px"> <HeaderStyle BackColor="#3366FF" Font-Bold="true" ForeColor="White" /> <RowStyle BackColor="#E1E1E1" /> <AlternatingRowStyle BackColor="White" /> <HeaderStyle BackColor="#3366FF" Font-Bold="true" ForeColor="White" /> <Columns> <asp:BoundField DataField="StateID" HeaderText="StateID" HeaderStyleHorizontalAlign="Left" /> <asp:BoundField DataField="StateName" HeaderText="StateName" HeaderStyleHorizontalAlign="Left" /> </Columns> </asp:GridView> </div> </td> </tr> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> &nbsp; <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Show " /> <br /> <br /> <br /> </div> </form> </body> 3) Connecting String in web config file

4) Design View for the same

4) Coding part Imports System.Data Imports System.Data.SqlClient Imports System.Web.UI.WebControls Partial Class _Default Inherits System.Web.UI.Page Private con As New SqlConnection '("Data Source=ACCELERANT11\SQLEXPRESS;Integrated Security=true;Initial Catalog=PPT") Dim str As String Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load End Sub Protected Sub BindGridview() str = System.Configuration.ConfigurationManager.ConnectionStrings("DBconnection").C onnectionString() con = New SqlConnection(str) con.Open() Dim cmd As New SqlCommand("select * from Country", con) Dim da As New SqlDataAdapter(cmd) Dim ds As New DataSet() da.Fill(ds) con.Close() gvParentGrid.DataSource = ds gvParentGrid.DataBind() End Sub Protected Sub gvUserInfo_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvParentGrid.RowDataBound If e.Row.RowType = DataControlRowType.DataRow Then con.Open() Dim gv As GridView = DirectCast(e.Row.FindControl("gvChildGrid"), GridView) Dim CountryId As Integer = Convert.ToInt32(e.Row.Cells(1).Text) Dim cmd As New SqlCommand("select * from State where CountryID=" & CountryId, con) Dim da As New SqlDataAdapter(cmd) Dim ds As New DataSet() da.Fill(ds) con.Close() gv.DataSource = ds gv.DataBind() End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click ' If Not IsPostBack Then BindGridview() ' End If End Sub End Class

5)Run the application

You might also like