Learn ASP.NET Web Forms and ASP.NET MVC. Intensive courses for professional developers. Conducted by Bipin Joshi in Thane. Read more details here.

Creating Master-Detail Listings using ASP.NET controls

Introduction

Many times we require to display data in master-detail format. ASP.NET controls like DataGrid and DataList can be easily used for this purpose. In this code sample we will see how to create master detail grids where master records are displayed in a DataList and detail records are displayed in a DataGrid that is inside one of the template column of the DataList.

How the sample works?

The sample web form available for download consists of a DataList. The DataList has one template column. Inside the template column we place a DataGrid and a link button. The DataGrid consists of two BoundColumns and displays the child rows for a given master record. The link button is used to toggle visibility of the DataGrid. The example uses Customers and Orders tables from Northwind database. Each row of DataList displays a single customer and its orders are displayed in the DataGrid. Following is the markup of the web form:
<asp:DataList id="DataList1" runat="server">
<ItemTemplate>
<table border="0">
<tr>
<td width="100px">
<asp:Label id="Label1" runat="server">
Customer ID:</asp:Label>
</td>
<td width="100px">
<asp:Label id="Label2" 
runat="server" 
text='<%# Container.dataitem("customerid") %>
'></asp:Label>
</td>
<td width="100px">
<asp:LinkButton id="LinkButton1" runat="server" 
CommandName="showorders">
Show Orders</asp:LinkButton>
</td>
</tr>
</table>
<br>
<asp:DataGrid id="DataGrid1" 
runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn HeaderText="Order ID" 
DataField="orderid"></asp:BoundColumn>
<asp:BoundColumn HeaderText="Order Date" 
DataField="orderdate"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</ItemTemplate>
</asp:DataList>

Retrieving the records

We will now write two functions that retrieve master and detail records respectively.
Public Function GetCustomerDataSet() As DataSet
	Dim connstr As String = "Integrated Security=SSPI;
	User ID=sa;Initial Catalog=Northwind;
	Data Source=.\NetSDK"
	Dim cnn As New SqlConnection(connstr)
	Dim da As New SqlDataAdapter
	("select top 10 customerid,companyname 
	from customers", cnn)
	Dim ds As New DataSet()
	da.Fill(ds, "customers")
	Return ds
End Function

Public Function GetOrdersDataSet(ByVal customerid As String) 
As DataSet
	Dim connstr As String = "Integrated Security=SSPI;
	User ID=sa;Initial Catalog=Northwind;
	Data Source=.\NetSDK"
	Dim cnn As New SqlConnection(connstr)
	Dim da As New SqlDataAdapter
	("select orderid,orderdate from orders where 
	customerid='" & customerid & "'", cnn)
	Dim ds As New DataSet()
	da.Fill(ds, "orders")
	Return ds
End Function
The GetCustomerDataSet function returns a DataSet from Customers table. For our example we will fetch only top 10 rows. The GetOrdersDataSet function accepts CustomerId as parameter and returns DataSet of all of its orders. The GetCustomerDataSet function will be called in the Page_Load as shown below:
Private Sub Page_Load
(ByVal sender As System.Object, ByVal e As EventArgs) 
Handles MyBase.Load
If Not Page.IsPostBack Then
	DataList1.DataSource = GetCustomerDataSet()
	DataList1.DataBind()
End If
End Sub

Setting the LinkButton properties

In order to hide and show child DataGrid we use LinkButton. The LinkButton needs to pass which row to hide or show to the Item_Command event handler. We will set its CommandArgument property in Item_DataBound event handler.
Private Sub DataList1_ItemDataBound
(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataListItemEventArgs) 
Handles DataList1.ItemDataBound

If e.Item.ItemType = ListItemType.Item 
Or e.Item.ItemType = ListItemType.AlternatingItem Then
CType(e.Item.FindControl("LinkButton1"), 
LinkButton).CommandArgument = e.Item.ItemIndex
End If

End Sub

Showing and Hiding the Child DataGrid

When user clicks on the LinkButton to toggle visibility of the DataGrid. Item_Command event is raised. Following code shows how this event handler looks like:
Private Sub DataList1_ItemCommand(ByVal source As Object, 
ByVal e As DataListCommandEventArgs) 
Handles DataList1.ItemCommand
If e.CommandName = "showorders" Then
If e.Item.ItemIndex = e.CommandArgument 
And (e.Item.ItemType = ListItemType.Item 
Or e.Item.ItemType = ListItemType.AlternatingItem) Then
	Dim customerid As String
	customerid = CType(e.Item.FindControl("Label2"), 
	Label).Text
	Dim childgrid As DataGrid
	Dim ds As DataSet = GetOrdersDataSet(customerid)
	childgrid = e.Item.FindControl("DataGrid1")
	childgrid.DataSource = ds
	childgrid.DataBind()
	childgrid.Visible = True
	CType(e.Item.FindControl("LinkButton1"), 
	LinkButton).Text = "Hide Orders"
	CType(e.Item.FindControl("LinkButton1"), 
	LinkButton).CommandName = "hideorders"
End If
Else
If e.Item.ItemType = ListItemType.Item 
Or e.Item.ItemType = 
ListItemType.AlternatingItem Then
	Dim childgrid As DataGrid
	childgrid = e.Item.FindControl("DataGrid1")
	childgrid.DataSource = Nothing
	childgrid.Visible = False
	CType(e.Item.FindControl("LinkButton1"), 
	LinkButton).Text = "Show Orders"
	CType(e.Item.FindControl("LinkButton1"), 
	LinkButton).CommandName = "showorders"
End If
End If
End Sub
Here, we simply toggle the Text property of LinkButton to "Show Orders" and "Hide Orders". We also set its CommandName property accordingly. If grid is to be displayed then we bind the DataGrid with DataSet returned from GetOrdersDataSet function we created earlier else we hide the grid.

Summary

In this article we saw how easy it is to create master-detail forms. We accomplished this in our example using DataList and DataGrid. You may use DataLists or DataGrids alone if you wish.

Bipin Joshi is the founder of BinaryIntellect Consulting and conducts professional training programs on ASP.NET in Thane. He is a published author and has authored or co-authored books for Apress and Wrox press. To know more about him click here. To know more about his training programs go here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Associated Links
Download Source Code

Tags : ASP.NET Web Forms Server Controls Data Controls
Posted On : 30 Mar 2003
Current Rating :
Rate this article :


This page is protected by copyright laws. Copying in any form is strictly prohibited. For Copyright notice and legal terms of use click here.

Protected by Copyscape