Code for hierarchical display using GridView in ASP. NET

In actual project development, I found a way to achieve the hierarchical effect using the GridView, and finally the following:


The following is the implementation code:
Aspx page
Copy codeThe Code is as follows:
<Asp: GridView ID = "GridView1" SkinID = "GridView" runat = "server" AutoGenerateColumns = "false"
Width = "100%" AllowPaging = "true" PageSize = "10">
<Columns>
<Asp: TemplateField HeaderStyle-Width = "1%">
<ItemTemplate>
<Asp: Image ID = "imgFlag" runat = "server" ImageUrl = "~ /Images/dn.gif "/>
</ItemTemplate>
<ItemStyle HorizontalAlign = "Center"/>
</Asp: TemplateField>
<Asp: BoundField DataField = "CustomerID" HeaderText = "customer No." HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "CompanyName" HeaderText = "company name" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "ContactName" HeaderText = "Contact" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "ContactTitle" HeaderText = "Contact title" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "Address" HeaderText = "contact Address" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "City" HeaderText = "City" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: TemplateField HeaderText = "contact number" HeaderStyle-Width = "10%">
<ItemTemplate>
<Asp: HiddenField ID = "HCustomerID" runat = "server" Value = '<% # Eval ("CustomerID") %>'/>
<% # Eval ("Phone") %>
<Tr runat = "server" id = "TRCustomers" style = "display: none">
<Td>
</Td>
<Td colspan = "7">
<Asp: GridView ID = "GridViewOrders" SkinID = "GridView" runat = "server" Width = "100%" AutoGenerateColumns = "false"
OnRowDataBound = "doOnRowDataBoundOrders">
<Columns>
<Asp: TemplateField HeaderStyle-Width = "1%">
<ItemTemplate>
<Asp: Image ID = "imgFlag1" runat = "server" ImageUrl = "~ /Images/dn.gif "/>
</ItemTemplate>
<ItemStyle HorizontalAlign = "Center"/>
</Asp: TemplateField>
<Asp: BoundField DataField = "OrderID" HeaderText = "Order No." HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "OrderDate" HeaderText = "Order Date" HeaderStyle-Width = "10%" DataFormatString = "{0: d}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "RequiredDate" HeaderText = "required date" HeaderStyle-Width = "10%"
DataFormatString = "{0: d}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "ShippedDate" HeaderText = "date of shipment" HeaderStyle-Width = "10%"
DataFormatString = "{0: d}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "Freight" HeaderText = "weight" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "ShipName" HeaderText = "shipping name" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: TemplateField HeaderText = "zip code" HeaderStyle-Width = "10%">
<ItemTemplate>
<Asp: HiddenField ID = "HOrderID" runat = "server" Value = '<% # Eval ("OrderID") %>'/>
<% # Eval ("ShipPostalCode") %>
<Tr runat = "server" id = "TROrders" style = "display: none">
<Td>
</Td>
<Td colspan = "7">
<Asp: GridView ID = "GridViewOrderDetails" SkinID = "GridView" runat = "server" Width = "100%"
AutoGenerateColumns = "false">
<Columns>
<Asp: BoundField DataField = "ProductName" HeaderText = "Product Name" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "Quantity" HeaderText = "Quantity" HeaderStyle-Width = "10%" DataFormatString = "{0: N}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "UnitPrice" HeaderText = "unit price" HeaderStyle-Width = "10%" DataFormatString = "{0: N}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "OPrice" HeaderText = "Total" HeaderStyle-Width = "10%" DataFormatString = "{0: N}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "Discount" HeaderText = "Discount" HeaderStyle-Width = "10%" DataFormatString = "{0: P}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "PPrice" HeaderText = "" HeaderStyle-Width = "10%" DataFormatString = "{0: N}">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
<Asp: BoundField DataField = "QuantityPerUnit" HeaderText = "Packing type" HeaderStyle-Width = "10%">
<ItemStyle HorizontalAlign = "Center"/>
</Asp: BoundField>
</Columns>
</Asp: GridView>
</Td>
</Tr>
</ItemTemplate>
</Asp: TemplateField>
</Columns>
</Asp: GridView>
</Td>
</Tr>
</ItemTemplate>
</Asp: TemplateField>
</Columns>
</Asp: GridView>

Background code
Copy codeThe Code is as follows:
Protected Sub Page_Load (ByVal sender As Object, ByVal e As System. EventArgs) Handles Me. Load
If Not IsPostBack Then
BindGridView ()
End If
End Sub
'1. First find the MERs data
Public Sub BindGridView ()
Dim strSQL As String = "SELECT * FROM MERs"
Dim dtTable As DataTable = GetDataTable (strSQL)
SCount = dtTable. Rows. Count
Me. GridView1.DataSource = dtTable
Me. GridView1.DataBind ()
End Sub
What to do when 'customer' data is bound
Protected Sub GridView1_RowDataBound (ByVal sender As Object, ByVal e As System. Web. UI. WebControls. GridViewRowEventArgs) Handles GridView1.RowDataBound
If e. Row. RowType = DataControlRowType. DataRow Then
Dim HCustomerID As String = CType (e. Row. FindControl ("HCustomerID"), HiddenField). Value
Dim TRCustomers As HtmlTableRow = CType (e. Row. FindControl ("TRCustomers"), HtmlTableRow)
If HCustomerID. Trim. Length> 0 Then
'Move the mouse to change the css style.
E. Row. Attributes. Add ("onmouseover", "currentcolor = this. className; this. className = 'mouseover ';")
E. Row. Attributes. Add ("onmouseout", "this. className = currentcolor ;")
'Locate all Orders of this Customer
Dim strSQL As String = "SELECT * FROM Orders WHERE CustomerID = '" & HCustomerID &"'"
Dim dtTable As DataTable = GetDataTable (strSQL)
Dim imgFlag As Image = CType (e. Row. FindControl ("imgFlag"), Image)
If dtTable. Rows. Count> 0 Then
Dim GridViewOrders As GridView = CType (e. Row. FindControl ("GridViewOrders"), GridView)
GridViewOrders. DataSource = dtTable
GridViewOrders. DataBind ()
'Set the Javascript For clicking a row
Dim strScript As New StringBuilder
StrScript. Append ("var obj = document. getElementById ('" & TRCustomers. ClientID &"');")
StrScript. Append ("var objimg = document. getElementById ('" & imgFlag. ClientID &"');")
StrScript. Append ("if (obj. style. display = 'None '){")
StrScript. Append ("obj. style. display = '';")
StrScript. Append ("objimg. src = 'images/up.gif ';")
StrScript. Append ("} else {")
StrScript. Append ("obj. style. display = 'none ';")
StrScript. Append ("objimg. src = 'images/dn.gif ';")
StrScript. Append ("}")
E. Row. Attributes. Add ("onclick", strScript. ToString)
Else
ImgFlag. ImageUrl = "~ /Images/up.gif"
End If
End If
End If
End Sub
Protected Sub doOnRowDataBoundOrders (ByVal sender As Object, ByVal e As System. Web. UI. WebControls. GridViewRowEventArgs)
If e. Row. RowType = DataControlRowType. DataRow Then
Dim HOrderID As String = CType (e. Row. FindControl ("HOrderID"), HiddenField). Value
Dim TROrders As HtmlTableRow = CType (e. Row. FindControl ("TROrders"), HtmlTableRow)
If HOrderID. Trim. Length> 0 Then
'Move the mouse to change the css style.
E. Row. Attributes. Add ("onmouseover", "currentcolor = this. className; this. className = 'mouseover ';")
E. Row. Attributes. Add ("onmouseout", "this. className = currentcolor ;")
'Locate all Order Details of this Order
Dim strSQL As String = "SELECT Products. productName, [Order Details]. unitPrice, [Order Details]. quantity, [Order Details]. unitPrice * [Order Details]. quantity AS OPrice, [Order Details]. discount ,"&_
"([Order Details]. UnitPrice * [Order Details]. Quantity) * (1.00-[Order Details]. Discount) AS PPrice, Products. QuantityPerUnit "&_
"FROM [Order Details] inner join Products ON [Order Details]. ProductID = Products. ProductID "&_
"WHERE OrderID = '" & HOrderID &"'"
Dim dtTable As DataTable = GetDataTable (strSQL)
Dim imgFlag1 As Image = CType (e. Row. FindControl ("imgFlag1"), Image)
If dtTable. Rows. Count> 0 Then
Dim GridViewOrderDetails As GridView = CType (e. Row. FindControl ("GridViewOrderDetails"), GridView)
GridViewOrderDetails. DataSource = dtTable
GridViewOrderDetails. DataBind ()
'Set the Javascript For clicking a row
Dim strScript As New StringBuilder
StrScript. Append ("var obj = document. getElementById ('" & TROrders. ClientID &"');")
StrScript. Append ("var objimg = document. getElementById ('" & imgFlag1.ClientID &"');")
StrScript. Append ("if (obj. style. display = 'None '){")
StrScript. Append ("obj. style. display = '';")
StrScript. Append ("objimg. src = 'images/up.gif ';")
StrScript. Append ("} else {")
StrScript. Append ("obj. style. display = 'none ';")
StrScript. Append ("objimg. src = 'images/dn.gif ';")
StrScript. Append ("}")
E. Row. Attributes. Add ("onclick", strScript. ToString)
End If
End If
End If
End Sub