Click here to Skip to main content
15,173,985 members
Articles / Web Development / CSS
Posted 15 Sep 2002


52 bookmarked

JScript Tree List Control with Resizable Columns

Rate me:
Please Sign up or sign in to vote.
4.65/5 (20 votes)
4 Oct 20023 min read
A tree list control written using CSS and JScript. Resizable columns!

Sample Image - jstreelistcontrol.gif


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.

Comments and Discussions

QuestionCan't Print if the page more than one page Pin
erros2218-May-09 21:06
Membererros2218-May-09 21:06 
GeneralWow ! Pin
satsat19-Mar-07 14:55
Membersatsat19-Mar-07 14:55 
Questionresizing problem Pin
Muharrem DEMİR30-Jul-06 5:05
MemberMuharrem DEMİR30-Jul-06 5:05 
Generaltree binding Pin
sunilmskr6-May-05 3:17
Membersunilmskr6-May-05 3:17 
GeneralTree lIst control rows get invisible problem Pin
sunilraje8-Jan-04 21:57
Membersunilraje8-Jan-04 21:57 
GeneralWonderful control Pin
rstgp29-Oct-03 23:25
Memberrstgp29-Oct-03 23:25 
GeneralError with createIn(document.body) function Pin
Anonymous29-May-03 14:54
MemberAnonymous29-May-03 14:54 
GeneralRe: Error with createIn(document.body) function Pin
Nathan Ridley29-May-03 20:04
MemberNathan Ridley29-May-03 20:04 
GeneralWow...and suggestions ...of course...;-) Pin
skyii28-Oct-02 12:02
Memberskyii28-Oct-02 12:02 
GeneralRe: More thoughts (after looking at the code). Pin
skyii29-Oct-02 8:13
Memberskyii29-Oct-02 8:13 
GeneralRe: More thoughts (after looking at the code). Pin
Nathan Ridley29-Oct-02 11:23
MemberNathan Ridley29-Oct-02 11:23 
GeneralAnother suggestion Pin
ashman_webdev7-Oct-02 20:23
Memberashman_webdev7-Oct-02 20:23 
GeneralRe: Another suggestion Pin
Nathan Ridley8-Oct-02 1:12
MemberNathan Ridley8-Oct-02 1:12 
GeneralAwesome work ! Pin
Ranjeet Chakraborty3-Oct-02 11:14
MemberRanjeet Chakraborty3-Oct-02 11:14 
GeneralWow! Pin
Megan Forbes24-Sep-02 10:13
MemberMegan Forbes24-Sep-02 10:13 
GeneralX-browser Pin
Martrix10124-Sep-02 1:00
MemberMartrix10124-Sep-02 1:00 
GeneralRe: X-browser Pin
Nathan Ridley24-Sep-02 14:09
MemberNathan Ridley24-Sep-02 14:09 
GeneralRe: X-browser Pin
Anonymous26-Sep-02 10:20
MemberAnonymous26-Sep-02 10:20 
GeneralRe: X-browser Pin
Daniel Turini3-Oct-02 6:34
MemberDaniel Turini3-Oct-02 6:34 
GeneralRe: X-browser Pin
Dave Comer15-Oct-03 7:02
sussDave Comer15-Oct-03 7:02 
GeneralRe: X-browser Pin
Nathan Ridley15-Oct-03 15:05
MemberNathan Ridley15-Oct-03 15:05 
GeneralExcellent! Pin
Philip Patrick22-Sep-02 23:15
professionalPhilip Patrick22-Sep-02 23:15 
GeneralImpressed Pin
Paul Watson19-Sep-02 22:14
sitebuilderPaul Watson19-Sep-02 22:14 
GeneralRe: Impressed Pin
Nathan Ridley22-Sep-02 18:45
MemberNathan Ridley22-Sep-02 18:45 
GeneralSuggestion Pin
Eric Lacroix19-Sep-02 18:00
MemberEric Lacroix19-Sep-02 18: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.