Click here to Skip to main content
11,922,877 members (54,665 online)
Click here to Skip to main content
Add your own
alternative version


88 bookmarked

JScript Tree List Control v3.0

, 6 Dec 2002
Rate this:
Please Sign up or sign in to vote.
Completely rewritten and much more versatile than my two previous tree list controls, this version includes dynamic branch loading, user-specifiable tree column, and more!

Sample Image - treelistcontrol.v3.gif


This is my third attempt at making a TreeListControl for Internet Explorer-based web applications. The first was very slow and required ASP to generate a tree. The second has lots of features, and even resizable columns, but, while it did not suffer from the freeze-up delays that occurred in the first one, was generally sluggish in operation if there were more than a few nodes on the screen. This latest version has tighter code and is generally more versatile all round. It doesn't have resizable columns, but it shouldn't be too hard to put them in. If I do that, I'll upload the updated version here. The only other major limitation of this control is that it is fixed-width. That is, you have to specify the exact width of each column, and this determines the control width.

Features that version 3.0 has are:

  • Enable/disable column headings
  • Enable/disable root node
  • The ability to choose which column the tree appears in
  • Dynamic loading of branches via XML files
  • Completely dynamic updating of the tree structure after it has been generated, including:
    • remove nodes
    • add new nodes
    • remove nodes and re-add them somewhere else
    • insert before or after a specified node
    • expand/collapse branches
  • optional row onclick action
  • row highlights while being pointed at
  • prevent specified columns from firing the row onclick event (e.g. for a column of checkboxes)

To use the control, simply include treelistcontrol.js and treelistcontrol.css in your html file, then, inside the element (body tag, div tag, or where ever) you want to render the tree inside, place a script tag and build the tree according to the API. A demo of how to do this is inside the included zip file.


See the API below for explanations of the tree's objects, and the file demo.htm for an example of how to use the tree.

  1. Create a tree control
  2. Create and add the columns to the tree
  3. Add all the initial nodes to the tree
  4. document.write the tree object to the page

Tree List Control v3.0 API


TreeListControl(strRootNodeLabel, strRootNodeIconSrc, boolHideColumnHeadings, boolHideRootNode)

  • strRootNodeLabel: the label to use for the root node
  • strRootNodeIconSrc: the path to the node's icon
  • boolHideColumnHeadings: don't show the column headings
  • boolHideRootNode: don't show the root node


  • showColumnHeadings: hide/show the column headings. The visibility of the column headings will automatically change depending on the state of this property.
  • showRootNode: hide/show the root node. The visibility of the root node will automatically change depending on the state of this property.
  • all: this is a collection (array) contain references to all the nodes that were assigned a non-null refKey when added to the tree. usage: mytree.all['mynoderefKey']
  • allNodes: this is a collection containing references to every node in the tree, indexed by the node's automatically assigned ID property.
  • rootNode: a reference to the tree's root node. This is of type TreeListControlNode.
  • iconPath: the path to the location where the tree's images are stored. The default is 'tlcimages/'.


  • addColumn( oColumnObject ): adds a column to the tree. Do not use this once the tree has been rendered to the page. Pass in a reference to a TreeListControlColumn object that defines the column's parameters.
  • add( oNodeObject ): appends a node to the children of the root node. Pass in a reference to a previously created node.


TreeListControlColumn (intWidth, strTitle, boolPreventRowClickEvents)

  • intWidth: the width, in pixels, of the column.
  • strTitle: the heading/title of the column. Use a zero-length string if no title is desired.
  • boolPreventRowClickEvents: when a row is clicked, it fires the onclick event for that row. Setting this parameter to true will prevent clicks in this row from firing that event.


TreeListControlNode (boolShowChildren, strIconSrc, strXMLSrc, strReferenceKey)

  • boolShowChildren: this specifies the initial expand/collapse state for the node.
  • strIconSrc: the path to the icon image to use.
  • strXMLSrc: if the children of this node are to be loaded at run-time when the node is expanded, this parameter should contain the URL of the XML file. Set to null or '' if not used.
  • strReferenceKey: if you want to use your own identifiers for each node, instead of the automatically-assigned ID that each node has, specify the identifier here. It can be an integer or a string, and, once the node has been added to the tree, you can access the node via the all property of the TreeListControl object.


  • onclick: the javascript to execute when the onclick event fires for that node. Only set this before the node has been added to the tree.


  • expand: shows the node's children.
  • collapse: hides the node's children.
  • setText( strColumn1, strColumn2, ..., strColumnN ): sets the node's text in each column.
  • setColumnText( intColumn, strText ): sets the text for the node in the specified column.
  • add( oNodeObject ): appends a node object to this node's children. DO NOT use this method if this node has not yet been added to the tree.
  • insertBefore( oNodeObject ): inserts the supplied node immediately before this node.
  • insertAfter( oNodeObject ): inserts the supplied node directly after this node.
  • remove(): removes this node from the tree completely and returns a reference to the node so that it can be reinserted elsewhere if desired.


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


About the Author

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

You may also be interested in...

Comments and Discussions

QuestionCan you add drag & drop features? Pin
tndang10-Jul-06 2:49
membertndang10-Jul-06 2:49 
QuestionDoes License allow useage? Pin
ErichG7-Jul-06 4:05
memberErichG7-Jul-06 4:05 
QuestionHow to get the node text in the click() function? Pin
shiffauli9-May-06 4:20
membershiffauli9-May-06 4:20 
I'm trying to get the text of the node in the click function.
In function TreeListControlNode
I added: = '';

Then in the TreeListControlNode.prototype.setColumnText
I added:
sText ?( = sText) ='';

Then the click() ::

But this alert does not get anything.
Can somebody help to solve my problem?
Either help me get another solution or tell me what I should be doing to solve this problem.
Anticipating a quick help,

GeneralTreeListControlNode.useIcon Pin
raahul802-May-06 12:42
memberraahul802-May-06 12:42 
GeneralRe: TreeListControlNode.useIcon Pin
raahul802-May-06 13:18
memberraahul802-May-06 13:18 
GeneralMove Nodes Pin
mediapod14-Nov-05 15:01
membermediapod14-Nov-05 15:01 
Questionover SSL ? Pin
Anonymous12-Oct-05 4:54
sussAnonymous12-Oct-05 4:54 
GeneralAdd scrollbar in tree list Pin
nguyenzoro29-Sep-05 16:45
membernguyenzoro29-Sep-05 16:45 
GeneralRe: Add scrollbar in tree list Pin
nguyenzoro2-Oct-05 20:24
membernguyenzoro2-Oct-05 20:24 
GeneralRe: Add scrollbar in tree list Pin
a@xpto.com9-May-06 6:06
membera@xpto.com9-May-06 6:06 
Generalxml file and unavailable - 405 Pin
gaetanl10-May-05 6:16
membergaetanl10-May-05 6:16 
Generalwhy i get the xmlhttp status - 200 Pin
aryong26-Apr-05 23:17
memberaryong26-Apr-05 23:17 
GeneralRe: why i get the xmlhttp status - 200 Pin
aryong27-Apr-05 17:03
memberaryong27-Apr-05 17:03 
QuestionMozilla Firefox?? Pin
Yosarian12-Apr-05 21:53
memberYosarian12-Apr-05 21:53 
GeneralAfter upgrading IE to v6 resizing columns does not work Pin
lilya29-Mar-05 23:06
memberlilya29-Mar-05 23:06 
GeneralRe: After upgrading IE to v6 resizing columns does not work Pin
Nathan Ridley29-Mar-05 23:38
memberNathan Ridley29-Mar-05 23:38 
GeneralHide both root node and column headings yields UI bug Pin
Kyle Secrist12-Jan-05 6:27
memberKyle Secrist12-Jan-05 6:27 
GeneralRe: Hide both root node and column headings yields UI bug Pin
nguyenzoro29-Sep-05 17:33
membernguyenzoro29-Sep-05 17:33 
GeneralRe: Hide both root node and column headings yields UI bug Pin
nguyenzoro2-Oct-05 20:23
membernguyenzoro2-Oct-05 20:23 
QuestionWould you explan more about how the UI refresh works? Pin
Kyle Secrist11-Jan-05 13:00
memberKyle Secrist11-Jan-05 13:00 
Generalresizable column Pin
ysahin10-Jan-05 6:53
memberysahin10-Jan-05 6:53 
GeneralRe: resizable column Pin
Nathan Ridley10-Jan-05 9:29
memberNathan Ridley10-Jan-05 9:29 
GeneralCan't load nodes at run-time by using strXMLSrc in TreeListControlNode Pin
tblyplus10-Aug-04 22:03
membertblyplus10-Aug-04 22:03 
GeneralRe: Can't load nodes at run-time by using strXMLSrc in TreeListControlNode Pin
Nathan Ridley12-Aug-04 2:05
memberNathan Ridley12-Aug-04 2:05 
GeneralExplorer view Pin
neejurk30-May-04 20:54
memberneejurk30-May-04 20:54 
GeneralRe: Explorer view Pin
Nathan Ridley30-May-04 21:12
memberNathan Ridley30-May-04 21:12 
GeneralDramatic slowdown Pin
sneathd24-Mar-04 5:35
membersneathd24-Mar-04 5:35 
GeneralRe: Dramatic slowdown Pin
Nathan Ridley16-Aug-04 17:15
memberNathan Ridley16-Aug-04 17:15 
GeneralNot worked on Netscape Pin
Ruslan A Dautkhanov22-Mar-04 1:17
memberRuslan A Dautkhanov22-Mar-04 1:17 
GeneralRe: Not worked on Netscape Pin
Nathan Ridley22-Mar-04 2:08
memberNathan Ridley22-Mar-04 2:08 
GeneralRe: Not worked on Netscape Pin
Nathan Ridley22-Mar-04 2:10
memberNathan Ridley22-Mar-04 2:10 
Generalcolumn resize Pin
ZG_6610-Mar-04 8:23
sussZG_6610-Mar-04 8:23 
GeneralRe: column resize Pin
Nathan Ridley10-Mar-04 12:30
memberNathan Ridley10-Mar-04 12:30 
GeneralXML node auto-expand Pin
olard19-Feb-04 2:38
memberolard19-Feb-04 2:38 
Questionhow to adjust the table to fit on the screen Pin
lrolandot20-Jan-04 14:16
memberlrolandot20-Jan-04 14:16 
Answerupdated code for 100% width Pin
Nathan Ridley28-Jan-04 3:47
memberNathan Ridley28-Jan-04 3:47 
GeneralFeature Request Pin
Florian Lagg12-Jan-04 0:44
memberFlorian Lagg12-Jan-04 0:44 
QuestionMoving the TreeList into a Web? Pin
Dave Comer20-Oct-03 12:41
sussDave Comer20-Oct-03 12:41 
AnswerRe: Moving the TreeList into a Web? Pin
dcomer20-Oct-03 13:08
sussdcomer20-Oct-03 13:08 
Nathan Ridley15-Sep-03 3:23
memberNathan Ridley15-Sep-03 3:23 
Questionhow to convert this code into .net Pin
Gopakumar R14-Sep-03 21:42
memberGopakumar R14-Sep-03 21:42 
Generalicon src Pin
Anonymous11-Sep-03 2:38
sussAnonymous11-Sep-03 2:38 
Questionhow to create .xml to show the tree control? Pin
yanlinzhang2-Sep-03 0:04
memberyanlinzhang2-Sep-03 0:04 
Generalit's so good Pin
Anonymous3-Aug-03 18:13
sussAnonymous3-Aug-03 18:13 
GeneralFreeze up Pin
pobrob23-Jul-03 12:32
memberpobrob23-Jul-03 12:32 
GeneralRe: Freeze up Pin
tigertoy18-Dec-03 10:25
membertigertoy18-Dec-03 10:25 
GeneralRe: Freeze up Pin
pobrob19-Dec-03 7:44
memberpobrob19-Dec-03 7:44 
GeneralRe: Freeze up Pin
Oliver Haskell28-Jan-04 3:25
sussOliver Haskell28-Jan-04 3:25 
GeneralTreeListControlHandler.allTrees.6.showRootNode is Null or no Object Pin
M.E.-P._Germany16-Jul-03 23:28
sussM.E.-P._Germany16-Jul-03 23:28 
GeneralRe: TreeListControlHandler.allTrees.6.showRootNode is Null or no Object Pin
pobrob17-Jul-03 4:49
memberpobrob17-Jul-03 4:49 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151125.1 | Last Updated 7 Dec 2002
Article Copyright 2002 by Nathan Ridley
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid