ASP.NET comes with very powerful template based, iterative web server
controls. Web pages that display data in tabular format can use DataGrid,
DataList or Repeater ASP.NET controls. There are cases where data need to
be presented in more complex/hierarchical format than simple tabular
format. This article focuses on simple techniques/tricks to present the data
in the hierarchical format, using existing ASP.NET controls.
The objective of this article is to present data in hierarchical format
in ASP.NET. Getting the best of existing ASP.NET core server controls is
the technical objective. Techniques presented in this article do not require
any knowledge of ASP.NET custom or user controls.
Doing Things Differently
There is a place for everything and everything in its place. This is
true even for ASP.NET controls. DataGrid no doubt is very powerful
control. But it is not good to solve all the problems. That is why
ASP.NET comes with DataList and Repeater controls. More interestingly
combination of these controls can do a lot complex things than we can
imagine. Thanks to Microsoft team for doing a great job with these
controls. At high-level in this article ASP.NET DataList control is
used as top-level control, with DataGrid and another DataList as
child controls in its item template.
About the Sample
This Article comes with the sample code to present data in tree-view
kind of format. As shown in Fig.1, there is a '+' sign on all top-level
rows. By clicking the '+' sign, node is expanded and node details or
summary information is displayed.
Fig. 1: Customer data presented in tree format
In each top-level row there are Summary and Detail check boxes. Each
node detail can show either summary information or details information
or both depending on this selection. Fig.2 shows sample screen with few
child nodes expanded.
Fig. 2: Customer data with some expanded child-nodes
Following are the high-level details of techniques and tricks used
in this article.
DataList ASP.NET web control is very flexible and any ASP.NET control including DataList and DataGrid can be nested in its item template.
DataList supports 'DataKeyField' property, which will allow storing key value for each row. Key value can be retrieved for any item, from DataKeys collection by passing currently selected row index.
DataList supports 'SelectedItemStyle/SelectedItemTemplate' for selected item
Each time different row is selected in DataList, 'SelectedIndexChanged' event is fired.
On 'SelectedIndexChanged' even handler, currently selected item index is obtained by using DataList.SelectedIndex property.
Using SelectedIndex in DataList.Items collection and FindControl method any child control object can be retrieved, for the selected row.
Depending on Detail/Summary check-box selection, Details/Summary data can be bound to DataGrid or DataList child control respectively.
Detail/Summary query uses key value of currently selected row from 'DataKeys' collection of main DataList.
In this sample, there is a round-trip to server for each click on the tree-node. But once queries are executed for details/summary child-controls, data is retained through ASP.NET viewstate. This saves at least two database calls on repeated selection of the node.
Nested-Controls and Viewstate
It is not clear how many nested levels are allowed with ASP.NET controls and data complexity/size that ASP.NET viewstate can handle. If you are planning to use the techniques suggested in this article please be aware of this. Feel free to use the code as per your requirements and at your own risk.
Installing and Running the Sample
Software Requirements for the sample: Sample is tested with SQL Server 2000, Microsoft Visual Studio 2002 and .net Framework 1.0 with SP2. I did not test this on VS 2003 or with .net Framework 1.1 but I don't see any reason why it should not work.
NOTE: You need access to SQL Server on local machine or on network and sample uses 'NorthWind' database that comes with SQL Server. You will not be able to run the sample without editing web.config with correct details of SQL Server.
Please do the following to install and run the sample applications:
Download the sample code (19 KB) and extract the sample files to the local machine.
Using IIS MMC, Create virtual directory 'HierarchicalData' and map it to 'HierarchicalData' folder from the extracted files above.
Make sure that "ConnectionString" property in web.config file in folder 'HierarchicalData' is pointing to correct SQL Server with correct user id and password.
Make sure that SQL server you are connecting to has 'Northwind' database and user has access to it.
Type in following URL in your browser: http://localhost/HierarchicalData/Default.aspx
You should see screen similar to Fig.1
Check 'Summary' and/or 'Detail' check box in any row and click on '+' sign on that row.