This example shows how to create Nested GridView In Asp.Net Using C# And VB.NET With Expand Collapse Functionality.
I have used JavaScript to Create Expandable Collapsible Effect by displaying Plus Minus image buttons.
Customers and Orders Table of Northwind Database are used to populate nested GridViews.
Drag and place SqlDataSource from toolbox on aspx page and configure and choose it as datasource from smart tags
Go to HTML source of page and add 2 TemplateField in <Columns>, one as first column and one as last column of gridview.
Place another grid in last templateField column.
Markup of page after adding both templatefields will like as shown below.
HTML SOURCE
Add following JavaScript in head section of page.
Write following code in RowDataBound Event of parent Grid to populate nested gridview.
C#
VB.NET
Build and run the application to test GridView Inside Grid.
I have used JavaScript to Create Expandable Collapsible Effect by displaying Plus Minus image buttons.
Customers and Orders Table of Northwind Database are used to populate nested GridViews.
Drag and place SqlDataSource from toolbox on aspx page and configure and choose it as datasource from smart tags
Go to HTML source of page and add 2 TemplateField in <Columns>, one as first column and one as last column of gridview.
Place another grid in last templateField column.
Markup of page after adding both templatefields will like as shown below.
HTML SOURCE
1: <asp:GridView ID="gvMaster" runat="server"
2: AllowPaging="True"
3: AutoGenerateColumns="False"
4: DataKeyNames="CustomerID"
5: DataSourceID="SqlDataSource1"
6: onrowdatabound="gvMaster_RowDataBound">
7: <Columns>
8: <asp:TemplateField>
9: <ItemTemplate>
10: <a href="javascript:collapseExpand('customerID-
11: <%# Eval("CustomerID") %>');">
12: <img id="imagecustomerID-<%# Eval("CustomerID") %>"
13: alt="Click to show/hide orders"
14: border="0" src="plus.png" /></a>
15: </ItemTemplate>
16: </asp:TemplateField>
17: <asp:BoundField DataField="CustomerID"
18: HeaderText="CustomerID"/>
19: <asp:BoundField DataField="CompanyName"
20: HeaderText="CompanyName"/>
21:
22: <asp:TemplateField>
23: <ItemTemplate>
24: <tr><td colspan="100%">
25: <div id="customerID-<%# Eval("CustomerID") %>"
26: style="display:none;
27: position:relative;left:25px;">
28:
29: <asp:GridView ID="nestedGridView" runat="server"
30: AutoGenerateColumns="False"
31: DataKeyNames="OrderID">
32: <Columns>
33: <asp:BoundField DataField="OrderID" HeaderText="OrderID"/>
34: <asp:BoundField DataField="OrderDate" HeaderText="OrderDate"/>
35: <asp:BoundField DataField="Freight" HeaderText="Freight"/>
36: </Columns>
37: </asp:GridView>
38: </div>
39: </td></tr>
40: </ItemTemplate>
41: </asp:TemplateField>
42: </Columns>
43: </asp:GridView>
44:
45: <asp:SqlDataSource ID="SqlDataSource1" runat="server"
46: ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
47: SelectCommand="SELECT [CustomerID], [CompanyName]
48: FROM [Customers]">
49: </asp:SqlDataSource>
Add following JavaScript in head section of page.
Write following code in RowDataBound Event of parent Grid to populate nested gridview.
C#
protected void gvMaster_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string customerID = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "CustomerID")); GridView gvChild = (GridView)e.Row.FindControl("nestedGridView"); SqlDataSource gvChildSource = new SqlDataSource(); gvChildSource.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; gvChildSource.SelectCommand = "SELECT [OrderID], [OrderDate],[Freight] FROM [Orders] WHERE [CustomerID] = '" + customerID + "'"; gvChild.DataSource = gvChildSource; gvChild.DataBind(); } }
VB.NET
Protected Sub gvMaster_RowDataBound(sender As Object, e As GridViewRowEventArgs) If e.Row.RowType = DataControlRowType.DataRow Then Dim customerID As String = Convert.ToString(DataBinder.Eval(e.Row.DataItem, "CustomerID")) Dim gvChild As GridView = DirectCast(e.Row.FindControl("nestedGridView"), GridView) Dim gvChildSource As New SqlDataSource() gvChildSource.ConnectionString = ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString gvChildSource.SelectCommand = "SELECT [OrderID], [OrderDate],[Freight] FROM [Orders] WHERE [CustomerID] = '" + customerID + "'" gvChild.DataSource = gvChildSource gvChild.DataBind() End If End Sub
Build and run the application to test GridView Inside Grid.
If you like this post than join us or share
7 comments:
Hi,
Thanks for this post, it's exactly what I was looking for.
I have however a little problem with it. The paging doesn't seem to work for me. I disabled it. If I expand a category and then scroll, the expanded content will stay in place, and the gvMaster will scroll behind it.
Any idea how to fix this?
Thanks,
Geb
Hi,
I just posted a comment saying that the scroll had a problem. I found the solution: On line 27 of the HTML source, remove «position:relative;» and it works. The expanded content now flows with the rest of the grid.
Thanks,
Geb
@Geb: Good to hear that you problem is resolved , happy coding :))
Thanks alot..It worked for me...Can you suggest how to provide functionality for Expand all and Collapse all..
Your Javascript works if you want to display data reference a unique customerID. Let's assume I want to create a repeater for each nested grid, you run into a problem if you are trying to expand the nested grid when two elements of the repeater share the same customerId that is located in two nestedgridview.
nice article to understand the nested gridview. but i face an error plz help me.
Must declare the scalar variable "@CustomerID"
WOuld this work in Mvc4
Post a Comment