ASP 101 - Active Server Pages 101 - Web03
The Place ASP Developers Go!

Please visit our partners

Windows Technology Windows Technology
15 Seconds
ASP 101
ASP Wire
VB Forums
VB Wire
internet.commerce internet.commerce
Partners & Affiliates

ASP 101 is an site
ASP 101 is an site
Internet News
Small Business
Personal Technology

Corporate Info
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash

 Top ASP 101 Stories Top ASP 101 Stories
The Top 10 ASP Links @
What is and Why Do I Need It?
An Overview of ASP.NET

Scope out your variables
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

Presenting Hierarchical Data in ASP.NET

by Jayram Tallamraju


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

Fig. 1

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

Fig. 2

Techniques/Tricks Behind?

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.
  • You should see screen similar to Fig.2.

Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback
The Network for Technology Professionals



Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers