Click here to Skip to main content
15,860,943 members
Articles / Programming Languages / ASP
Article

ASP TreeList Control (Requires Internet Explorer 5.0+)

Rate me:
Please Sign up or sign in to vote.
4.81/5 (20 votes)
21 Apr 20022 min read 291.3K   3.1K   76   66
An ASP class (Classic ASP) that generates a dynamic html tree list control that looks the same as a windows explorer tree but allows multiple columns of data per tree node

Sample Image - asptreelistcontrol.gif

Introduction

I needed a class to create a tree list control for a web application I'm building, and after looking around on the net and failing to find anything similar, I decided to create my own. The main challenge with creating a decent tree list control with HTML, CSS and JScript is that there is no way to effectively create a node heirarchy and guarantee that the columns for each node will line up with the columns for all the other nodes. I experimented with div, span, table, tbody, thead, tr, p, ul, etc, but none offered an acceptable solution.

My solution was to create a single non-heirarchical table and store all of the node information in a javascript array. When a +/- button is pressed, the javascript extrapolates from the array which rows it has to hide and which nodes it has to show. Note that doing it this way I also had to store state information for every expandable node so that when expanding or collapsing a node, it would maintain the expanded/collapsed state of child nodes.

The ASP class generates an initial tree and the JScript code reads the html and extracts the information it needs to make the tree interactive. Unfortunately you can't update the tree with the current code once it has been generated in the browser, but that is ok because I had no need to do that.

My MAIN issue with this tree list control is, although it is reasonably fast to generate, and works perfectly, after you get about 100-200 nodes in the tree (I'm using a Pentium 4, 1.4ghz), the JScript starts getting very slow and unresponsive. If you find this control useful and manage to optimise the jscript code so that it is actually fast with a large number of nodes in the tree, I would greatly appreciate it if you could post the updated code here so I can take a look.

Below is the code to create a demonstration tree list. As you can see the control is very easy to use, just create an instance of the control, add the column headings, and then add the nodes. You can't add a node if its parent doesn't yet exist. Also, you should not reveal a node using the reveal function unless the node actually exists. Doing so will cause the page to create an error.

VBScript
<!--#include file="treelistcontrol/treelistcontrol.asp"-->
<%
	dim tree
	set tree = new treelistcontrol

	'specify our default settings for the tree
	tree.allowrowselect = false
	tree.showborder = false
	tree.pathtoicons = "treelistcontrol/"
	tree.showdividers = false

	'define the columns for the tree
	tree.addcolumn "Node Name", "", ""
	tree.addcolumn "Day of Week", "100", ""
	tree.addcolumn "Month", "100", ""
	tree.addcolumn "Random Number", "80", "right"
	
	dim id, parentid, theday, themonth, thenumber
	randomize
	for id = 1 to 100
		'make some random values for the tree
		parentid = int(rnd*id)
		theday = weekdayname(int(rnd*7)+1)
		themonth = monthname(int(rnd*12)+1)
		thenumber = formatnumber(int(rnd*1000000),,,true)
		
		'add the node
		tree.addnode id+0, parentid, "treelistcontrol/icon_folder.gif", false, _
				array(id+0, theday, themonth, thenumber)
		
	next
	'reveal node #100
	tree.revealnode 100
	
	response.write tree.value
%>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Australia Australia
Web application developer, graphic designer, aspiring entrepreneur, snowboarder and electronic music afficianado.


Comments and Discussions

 
Questionadding CSS style sheets for font controls Pin
georgemichael7-Dec-21 9:29
georgemichael7-Dec-21 9:29 
QuestionHi , This is very nice treelist control Pin
omid136123-Feb-10 7:16
omid136123-Feb-10 7:16 
AnswerRe: Hi , This is very nice treelist control Pin
Nathan Ridley23-Feb-10 7:19
Nathan Ridley23-Feb-10 7:19 
Questionlimited nodes to the treecontrollist ? Pin
ced4pass28-Jul-05 3:12
ced4pass28-Jul-05 3:12 
Generalwhy not render with XSL Pin
lyredsoft22-Apr-05 8:53
lyredsoft22-Apr-05 8:53 
GeneralColumn resizing does not work In IE 6.0 Pin
lilya29-Mar-05 21:55
lilya29-Mar-05 21:55 
Questionhow can I add new node? Pin
alexeom4-Dec-03 18:10
alexeom4-Dec-03 18:10 
Generalchild without parent Pin
EraserR23-Nov-03 23:52
EraserR23-Nov-03 23:52 
GeneralShow all tree elements Pin
sohhh30-Sep-03 15:29
sohhh30-Sep-03 15:29 
GeneralRe: Show all tree elements Pin
Nathan Ridley30-Sep-03 15:51
Nathan Ridley30-Sep-03 15:51 
GeneralRe: Show all tree elements Pin
sohhh1-Oct-03 6:51
sohhh1-Oct-03 6:51 
QuestionASP.NET? Pin
OBRon29-Jul-03 16:45
OBRon29-Jul-03 16:45 
AnswerRe: ASP.NET? Pin
Nathan Ridley1-Aug-03 17:00
Nathan Ridley1-Aug-03 17:00 
GeneralTREELISTCONTROL VERSION 3.0 Pin
Nathan Ridley23-Apr-03 11:23
Nathan Ridley23-Apr-03 11:23 
GeneralRe: TREELISTCONTROL VERSION 3.0 Pin
nteller8-Jun-03 10:06
nteller8-Jun-03 10:06 
Generali need help in use this code to display tree folder Pin
bmwmpowers22-Apr-03 22:28
bmwmpowers22-Apr-03 22:28 
GeneralRe: i need help in use this code to display tree folder Pin
Nathan Ridley23-Apr-03 11:21
Nathan Ridley23-Apr-03 11:21 
GeneralRe: i need help in use this code to display tree folder Pin
bmwmpowers24-Apr-03 4:54
bmwmpowers24-Apr-03 4:54 
GeneralRe: i need help in use this code to display tree folder Pin
Nathan Ridley26-Apr-03 14:26
Nathan Ridley26-Apr-03 14:26 
GeneralMAC Explorer 5.0+ Pin
camsv30-Jan-03 6:27
camsv30-Jan-03 6:27 
GeneralRe: MAC Explorer 5.0+ Pin
Nathan Ridley30-Jan-03 10:19
Nathan Ridley30-Jan-03 10:19 
GeneralMuch faster way of expanding nodes Pin
Anonymous29-Dec-02 5:53
Anonymous29-Dec-02 5:53 
GeneralRe: Much faster way of expanding nodes Pin
Anonymous29-Dec-02 12:26
Anonymous29-Dec-02 12:26 
GeneralRe: Much faster way of expanding nodes Pin
y1091330-May-03 6:25
y1091330-May-03 6:25 
GeneralRe: Much faster way of expanding nodes Pin
mgcristino13-Sep-04 23:28
mgcristino13-Sep-04 23:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.