Click here to Skip to main content
11,410,129 members (63,766 online)
Click here to Skip to main content

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.

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

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

TreeListControl . createIn ( objContainerElement )

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

TreeListControl . 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.

TreeListControl . 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.

TreeListControl . deleteNode ( intNodeID )

Deletes the specified node and all its children.

TreeListControl . deleteAllChildren ( intNodeID )

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

TreeListControl . 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.


TreeListControl . 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 Pinmembererros2218-May-09 21:06 
GeneralWow ! Pinmembersatsat19-Mar-07 14:55 
Questionresizing problem Pinmembermicroturk30-Jul-06 5:05 
Generaltree binding Pinmembersunilmskr6-May-05 3:17 
GeneralTree lIst control rows get invisible problem PinsussSunil Baheti8-Jan-04 21:57 
GeneralWonderful control Pinmemberrstgp29-Oct-03 23:25 
GeneralError with createIn(document.body) function PinsussAnonymous29-May-03 14:54 
GeneralRe: Error with createIn(document.body) function PinmemberNathan Ridley29-May-03 20:04 
GeneralWow...and suggestions ...of course...;-) PinsussSkyII28-Oct-02 12:02 
GeneralRe: More thoughts (after looking at the code). PinsussSkyII29-Oct-02 8:13 
GeneralRe: More thoughts (after looking at the code). PinmemberNathan Ridley29-Oct-02 11:23 
GeneralAnother suggestion Pinmemberashman_webdev7-Oct-02 20:23 
GeneralRe: Another suggestion PinmemberNathan Ridley8-Oct-02 1:12 
GeneralAwesome work ! PinmemberRanjeet Chakraborty3-Oct-02 11:14 
GeneralWow! PinmemberMegan Forbes24-Sep-02 10:13 
GeneralX-browser PinmemberMartrix10124-Sep-02 1:00 
GeneralRe: X-browser PinmemberNathan Ridley24-Sep-02 14:09 
GeneralRe: X-browser PinsussAnonymous26-Sep-02 10:20 
GeneralRe: X-browser PinmemberDaniel Turini3-Oct-02 6:34 
GeneralRe: X-browser PinsussDave Comer15-Oct-03 7:02 
GeneralRe: X-browser PinmemberNathan Ridley15-Oct-03 15:05 
GeneralExcellent! PinmemberPhilip Patrick22-Sep-02 23:15 
GeneralImpressed PinsitebuilderPaul Watson19-Sep-02 22:14 
GeneralRe: Impressed PinmemberNathan Ridley22-Sep-02 18:45 
GeneralSuggestion PinmemberEric Lacroix19-Sep-02 18:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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
Web04 | 2.8.150414.5 | Last Updated 5 Oct 2002
Article Copyright 2002 by Nathan Ridley
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid