Click here to Skip to main content
13,588,935 members
Click here to Skip to main content
Add your own
alternative version


52 bookmarked
Posted 15 Sep 2002

JScript Tree List Control with Resizable Columns

, 4 Oct 2002
Rate this:
Please Sign up or sign in to vote.
A tree list control written using CSS and JScript. Resizable columns!
<!-- Download Links --> <!-- Article image -->

Sample Image - jstreelistcontrol.gif

<!-- Add the rest of your HTML here -->


Note: this code requires internet explorer 5.5 or better.

Following up on a tree list control I made using JScript and ASP (article here), I have created a new one which requires no ASP at all. It is not very fast in adding a whole lot of nodes at once, but expanding and contracting a node is instantaneous. Hovering over text in a row will cause the node for that row to highlight, making it easier to determine which node you are looking at.


Create an instance of the tree:

var myTree = new TreeListControl("myUniqueID");
Add the columns:
myTree.addColumn([column name], [width], [alignment]);
Create the tree, specifying the parent element:
Add Nodes:
myTree.addNode([parent ID], [relative path to icon], [expand branch?], 
                [column text 1], ..., [column text n]);
Delete a Node:
myTree.deleteNode([node ID]);



TreeListControl ( strID )

Each instance of the tree must have its own unique identifier. This will become the .id property of the element, and is used in id assignment for all the nodes.

. addColumn ( strTitle[, [intWidth[, strAlign]]] )

Adds a column to the tree. This must be done before the createIn() method of TreeListControl is called.

. createIn ( objContainerElement )

This builds the main tree object and appends it to the object passed in.

. addNode ( intParentID, strIconSrc, boolExpandChildren, strColumnText1, ..., strColumnTextN

Used to add an entry in the tree. The return value is the integer ID value for that node, which can be used to reference that node later if desired. First supply the parent ID for the node you are adding (0 or null if there is no parent), then a path to the icon to be used, then true/false depending on whether you want this branch to be collapsed or expanded, then the text for each column. If you use the string [[id]] in the text for the columns, it will be replaced with the actual id number that node is assigned. Also, if a node is added, and the specified parent does not exist, it will be queued and added when the parent id is added to the tree.

. setText ( intNodeID, intColumnIndex, strText )

Changes a node's text in the specified column. If you use the string [[id]] in the text for the columns, it will be replaced with the actual id number that node is assigned.

. deleteNode ( intNodeID )

Deletes the specified node and all its children.

. deleteAllChildren ( intNodeID )

Deletes all the children of the specified node, but not the node itself.

. redrawAllIcons ( )

Forces the tree to redraw all the line connection images that make the tree look correct. This must be called if nodes have been added while the property autoRedrawIcons was set to false.


. autoRedrawIcons

When a new node is added, this determines whether or not to recalculate which line connector images to draw so that the tree looks correct. If you are adding a whole bunch of nodes at once, set this to false, add the nodes, then set it to true. This should speed up the operation.

Example usage

function addone(parentid) {
    var opt = "[ Delete";
    opt += " | Add Child ]"
    var newid = xx.addNode(parentid,
                xx.pathtoicons+"icon_folder.gif", //the icon to use
                true, //expand this node's children?
                s[Math.floor(Math.random()*s.length)], //value for column 1
                s[Math.floor(Math.random()*s.length)], //value for column 2
                s[Math.floor(Math.random()*s.length)], //value for column 3
                s[Math.floor(Math.random()*s.length)], //value for column 4
                opt); //value for column 4

xx = new TreeListControl("tlc1"); //create an instance of the control 
                                  // and specify its unique identifier string
xx.autoRedrawIcons = false;       //don't calculate the icons until we've added
                                  // all the nodes (faster this way)
xx.pathtoicons = "treelistcontrol/treeicons/"; //specify the path to the tree 
                                               // icons
xx.addColumn("Things",250) //add some columns (label, width, alignment)
xx.addColumn("More Things",150)
xx.addColumn("Interesting Things",150)
xx.addColumn("Other Things",150)
xx.addColumn("Options",null,"right") //the last column should not have a width

xx.createIn(document.body); // create the tree, passing in the container object
                            //to generate the tree inside

s = new Array("yay","cool","wonderful","great","awesome","fluff",
              "green","beans","mean","machine", "high","balloons",
              "apples and cherries","bump"); //make some random text values
for(var z=0; z<50; z++){

xx.autoRedrawIcons = true; //remember to set this back to true so that future 
                           //nodes added will be drawn correctly
xx.redrawAllIcons(); //since no icons were drawn, redraw all of them


5 Oct 2002 - Updated source code


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't Print if the page more than one page Pin
erros2218-May-09 20:06
membererros2218-May-09 20:06 
GeneralWow ! Pin
satsat19-Mar-07 13:55
membersatsat19-Mar-07 13:55 
Questionresizing problem Pin
microturk30-Jul-06 4:05
membermicroturk30-Jul-06 4:05 
Generaltree binding Pin
sunilmskr6-May-05 2:17
membersunilmskr6-May-05 2:17 
GeneralTree lIst control rows get invisible problem Pin
Sunil Baheti8-Jan-04 20:57
sussSunil Baheti8-Jan-04 20:57 
GeneralWonderful control Pin
rstgp29-Oct-03 22:25
memberrstgp29-Oct-03 22:25 
GeneralError with createIn(document.body) function Pin
Anonymous29-May-03 13:54
sussAnonymous29-May-03 13:54 
GeneralRe: Error with createIn(document.body) function Pin
Nathan Ridley29-May-03 19:04
memberNathan Ridley29-May-03 19:04 
GeneralWow...and suggestions ...of course...;-) Pin
SkyII28-Oct-02 11:02
sussSkyII28-Oct-02 11:02 
GeneralRe: More thoughts (after looking at the code). Pin
SkyII29-Oct-02 7:13
sussSkyII29-Oct-02 7:13 
GeneralRe: More thoughts (after looking at the code). Pin
Nathan Ridley29-Oct-02 10:23
memberNathan Ridley29-Oct-02 10:23 
Thanks for the comments, lots of things to think about there! I think, first of all, I kind of discovered the javascript prototype keyword halfway through coding it and adapted the code to fit, but I didn't have enough time to start from scratch and make it completely derived from an abstract base class, which is why you see a lack of any base class as such. I will also point out that while this is a great starting point, I'm sure it could be rewritten much more elegantly.

Regarding the spans inside divs, instead of simply referencing a text node, I think I did that so that when inserting text into the tree i could use innerHTML just for the text, thus forcing IE to parse an html structure if I so desired, therefore giving more flexibility to the node contents. I had a few script elements on some of the things I was using it for, so that's one of the major reasons for that.

As for inserting nodes that don't yet have parents, the reason for that is I was looking for a quick and fail-safe way of inserting items from a database table that referenced each other internally using a parentid field. I came across a problem with my previous tree (see my other article) that if a table record had a parent record that was inserted after it was (i.e. this could only happen if the node was assigned to a different parent after being created) then this would cause an infinite loop. I figured it would be quicker to simply store the nodes that didn't have parents yet and insert them once their parent arrived.

I agree with you on the slow DOM manipulation of a table-based approach, I was doing something similar in my previous article and I found after about 100-200 nodes it started to become unacceptably slow.

I would personally love to see any changes or rewrites of the code I have here. I actually ditched this code in favour of a dynamic tree on the left with a context menu attached to each node and an iframe on the right that would update to display the contents of the tree. I used the excellent dynamic tree (XLoadTree) I found at

One of the reasons I didn't end up using my own tree is that it occurred to me after I created the tree that I wanted to be able to easily have a row highlight colour whenever you moved the mouse over a row, and the ability to select an entire row and due to the css padding that I'd used, this became impossible without writing some sort of bizaare floating coloured div beneath the tree elements.

I am the first to say I'm sure this could be done much better, and if you come up with something better, I'd love to see it. Perhaps post the article here on code project? Big Grin | :-D

Web Application Developer
GeneralAnother suggestion Pin
ashman_webdev7-Oct-02 19:23
memberashman_webdev7-Oct-02 19:23 
GeneralRe: Another suggestion Pin
Nathan Ridley8-Oct-02 0:12
memberNathan Ridley8-Oct-02 0:12 
GeneralAwesome work ! Pin
Ranjeet Chakraborty3-Oct-02 10:14
memberRanjeet Chakraborty3-Oct-02 10:14 
GeneralWow! Pin
Megan Forbes24-Sep-02 9:13
memberMegan Forbes24-Sep-02 9:13 
GeneralX-browser Pin
Martrix10124-Sep-02 0:00
memberMartrix10124-Sep-02 0:00 
GeneralRe: X-browser Pin
Nathan Ridley24-Sep-02 13:09
memberNathan Ridley24-Sep-02 13:09 
GeneralRe: X-browser Pin
Anonymous26-Sep-02 9:20
sussAnonymous26-Sep-02 9:20 
GeneralRe: X-browser Pin
Daniel Turini3-Oct-02 5:34
memberDaniel Turini3-Oct-02 5:34 
GeneralRe: X-browser Pin
Dave Comer15-Oct-03 6:02
sussDave Comer15-Oct-03 6:02 
GeneralRe: X-browser Pin
Nathan Ridley15-Oct-03 14:05
memberNathan Ridley15-Oct-03 14:05 
GeneralExcellent! Pin
Philip Patrick22-Sep-02 22:15
memberPhilip Patrick22-Sep-02 22:15 
GeneralImpressed Pin
Paul Watson19-Sep-02 21:14
sitebuilderPaul Watson19-Sep-02 21:14 
GeneralRe: Impressed Pin
Nathan Ridley22-Sep-02 17:45
memberNathan Ridley22-Sep-02 17:45 
GeneralSuggestion Pin
Eric Lacroix19-Sep-02 17:00
memberEric Lacroix19-Sep-02 17:00 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.180615.1 | Last Updated 5 Oct 2002
Article Copyright 2002 by Nathan Ridley
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid