CodeProject: Tree View. Free source code and programming help

Announcements

	Windows 7 Comp Win a laptop!
	Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

WinHelp / HTMLHelp

Uncategorised Quick Answers

Graphics / Design

Expression

Usability

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

Code Signing Resources

WhitePapers / Webcasts

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

18 votes for this article.

Popularity: 5.09 Rating: 4.06 out of 5

Sample Image - screenshot.gif

Introduction

Tree View builds tree browsers for your web pages. It was inspired by D. D. de Kerf who created Easy DHTML treeview.

However, it was not practical for creating complex dynamic trees. So I took his ideas and wrote a JavaScript that uses DOM to build the hierarchical document he created with static HTML.

To build the tree is very straightforward:

You include the treeview.js file into your HTML.

<script language="javascript" src="scripts/tree_view.js"></script>

Hook into the event that calls a method when the page is loaded:
```
<body onLoad="CreateProjectExplorer()">
```

Create a function that builds the tree:

function CreateProjectExplorer()
{
    Initialise();
    // This MUST be the called before

    // any other of treeview's funcitons.


    // Build a test project.

    d = CreateTreeItem( rootCell, "img/project.gif", 
        "img/project.gif", "Point of Sale terminal", 
        null, null );
    d2 = CreateTreeItem( d, "img/folder_closed.gif", 
         "img/folder_open.gif", "Actors", null, null );
    // .....

}

That's it! You are up and running with a tree browser.

The function signature is:

// Creates a new package under a parent. 

// Parameters:

//    parent: The parent element of the new element. (E.g. a folder)

//    img1FileName: File name of the "unclicked" image. (E.g. Closed folder)

//    img2FileName: File name of the "clicked" image. (E.g. Open folder)

//    nodeName: The text to display for the tree node.

//    url: The url to link to when the node is clicked.

//    target: Target when the node is clicked.

//            Possible values are: Frame name, _blank, _self

// Returns:

//    The newly created tree node item. 

//    To create children of the new node pass the returned 

//    node in as a parent of another new node.

function CreateTreeItem( parent, img1FileName, 
                         img2FileName, nodeName, url, target )

Thanks to D. D. de Kerf for the inspiration!

Note: This script is supplied "as is" without any form of warranty. Rewritten Software shall not be liable for any loss or damage to person or property as a result of using this script. Use this script at your own risk!

You are licensed to use this script free of charge for commercial or non-commercial use providing you do not remove the copyright notice or disclaimer from the comment section in the script.

Have fun!

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

About the Author

Bryon Baker

Member

Occupation:	Web Developer
Location:	Australia

Other popular Client side scripting articles:

Handy XP Style Menu
This is a pretty menu in XP style. Easy to setup, highly customizable.
JavaScript For Beginners
A very easy tutorial for JavaScript beginners
Auto-complete Control
Auto-complete control.
JavaScript Virtual Keyboard
This article presents a Virtual Keyboard - an important addendum to the library of usability tools.
Observer Design Pattern Using JavaScript
Ensuring a crisp boundary exists between objects, enabling greater reuse and system maintainability.

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 25 of 30 (Total in Forum: 30) (Refresh)

FirstPrevNext

Thanx

ajay_nahan

22:36 25 Jan '09

It Helps me lot Thanx Again
Sign In·View Thread·PermaLink

How to use it in asp.net2.0

VimalSaifudin

20:39 11 Nov '07

The + and - images are not displayed on pageLoad. After refreshing or clicking on each nodes, they are displayed. What might be the reason?
Sign In·View Thread·PermaLink	1.50/5 (4 votes)

Opening the URL in the same window

ai4u

4:00 28 Jun '07

I am using this treeview on a page and not using Frames . i want to open the link on one of the childnodes in the same window of the browser . how can I do that . With the present code when I click on any childnode with URL it opens in another window. I tried by giving the value to "target" parameter but nothing happened. Atul
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

how to display xml data in treecheckbox using javascript

snitu

19:35 8 Apr '07

hi all I m new user of this group. i am using javascript for creating treecheckbox. the problem is how to show the nodes name from xml file. Plz.??????????????????? reply me as soon as possible. thanks snitu
Sign In·View Thread·PermaLink	3.00/5 (2 votes)

Not running

sdhiman

1:06 28 Dec '06

Dear sir,

I want to display a tree of groups and subgroups. This tree script is good for small numbers of groups but not well if there are a huge number of groups around 2000.

I gives an error 'A script on this page is causing Internet Explorer to run slowly, if it continues to run your computer may became unresponsive.
Do you want to abort the script ?'

The above message is display,
is there any solution...
sanjeev dhiman
sdhiman@coecipl.com

Sanjeev Dhiman
Software Engineer
NOIDA, India
sdhiman@coecipl.com

Drawing the tree in a special location

islam galileo

4:13 19 Apr '06

hi how it is going i used the script and it is very good but i wanna the tree to be drawn in a specific location inside a td i don't want it to be at the left of the document so how i can do this
Sign In·View Thread·PermaLink	1.00/5 (2 votes)

Re: Drawing the tree in a special location

islam galileo

4:16 19 Apr '06

i think i found the solution that is by selecting another element by its id and it works with td not table
Sign In·View Thread·PermaLink	1.67/5 (3 votes)

Re: Drawing the tree in a special location

jrios

9:24 21 May '06

I insert a table and to rootCell variable assign : rootCell=tblMenu.cells(0); Note: "tblMenu" is the name of the table, I hope you understand me, bye
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

Removing Plus When there are no child nodes

Mikan23

13:39 14 Feb '06

Very nice script. But for those trying to remove the expansion sign in front when an item has no children. After adding all of your nodes, just run this function (just an adaption of toggle() without the toggle)

function TestIcons() {
    var idx = -1;
    for( i = 0; i < iconList.length; i++ )
    {
        item = iconList[i][0];
        if (item) {
            idx = i;
        
            var div=document.getElementById("D"+item);
            var key=document.getElementById("P"+item);
            
            
            // Check if the item clicked has any children. If it does not then remove the plus/minus icon
            // and replace it with a transaparent gif.
            var removeIcon = div.hasChildNodes() == false;
            
            if( key != null )
            {
                if( removeIcon )
                    key.innerHTML="<img src='transparent.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
            }
        }
    }
}

Re: Removing Plus When there are no child nodes

mrtsherman

17:45 30 Apr '06

Where do you place the function call?
Sign In·View Thread·PermaLink

Re: Removing Plus When there are no child nodes

Mikan23

20:51 30 Apr '06

You should call TestIcons() at the end of the CreateProjectExplorer function as shown. `function CreateExplorer() { Initialize(); CreateTreeItem(); //however many times you call it TestIcons(); }` Then call CreateExplorer() in the body OnLoad.
Sign In·View Thread·PermaLink

Re: Removing Plus When there are no child nodes

mrtsherman

6:37 2 May '06

Yes, that is what I thought. It appears that this only works in latest versions of FireFox and does not work in IE 6. I'm not sure why it does not work. I tried on two different machines running WindowsXP SP2 + IE6. Thank-you for the reply.
Sign In·View Thread·PermaLink

Re: Removing Plus When there are no child nodes

Mikan23

14:13 18 May '06

Okay, I've updated the code so it now works in both Firefox and IE 6, I cannot vouch for older versions of either, but at least with the latest items, this version should work.


function TestIcons() {
	var idx = -1;
	var item = false;
	for( i = 0; i < iconList.length; i++ )
	{
		if (iconList[i].length != 0) {
			item = new String(iconList[i][0]);
		}

		if (item) {
			idx = i;
		
			if( idx < 0 )
				alert( "Could not find key in Icon List." );
				   
			var div=document.getElementById("D"+item);
			var key=document.getElementById("P"+item);
			
			// Check if the item clicked has any children. If it does not then remove the plus/minus icon
			// and replace it with a transaparent gif.
			var removeIcon = false;
			if (div.hasChildNodes() == null || div.hasChildNodes() == false) {
				var removeIcon = true;
			}
			
			if( key != null )
			{
				if( removeIcon )
					key.innerHTML="<img src='transparent.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";
			}
		}
	}
}

thanks

Merlin Rose

22:13 5 May '09


Sign In·View Thread·PermaLink

Thank You

davidgev

10:46 30 Nov '05

Hello.
Thanks a lot for the tree, it works well.
But there is some things that I don't like, isn't it
possible to remove (from the beginning) the plus image icon from
nodes wich don't have child nodes (I've noticed that you do so when
the node is clicked), and I have one more comment regarding this, also
when the node doesn't have any child nodes then by clicking it the
image icon which indicates for ex. that folder is open must not appear, because it doesn't have any childs (it seems same problem as with plus
icon) Also, is it possible to make this tree open travesed from the beginning
(I mean when the tree, page is opened the child nodes are already opened, is yes please help me, how I can do this)

Thanks in advance.

David Gevorkian (davidgev@lycos.com)

TreeView Vertical Lines

Lorraine Concos

6:41 30 Sep '05

Thanks for your help, one more question: how do we get the vertical lines to appear with Tree View?
Sign In·View Thread·PermaLink	1.00/5 (2 votes)

Re: TreeView Vertical Lines

Bryon Baker

17:23 30 Sep '05

That is more tricky, but achievable.

You will need to change how the nesting works. At the moment it just uses padding when the DIV is created for the child with the CreateDiv() method. The line that controls the indentation of the children is: div.style.marginLeft = "2em";
Change this value to "5em" and "0em" how it works.

To also better understand the nesting change the value of the border attribute in the CreateTreeItem() method.
table.setAttribute( "border", 1 );

Once you have done this you will see how the nesting works and then it will be self evident as to what you need to do.

But, in a nut shell, in order to get the vertical bars you will need to reduce the padding to zero and create a new TD in each TR for every level of indentation. Then assign the cell an image.

When playing with this I suggest you keep borders visible so you can see what is happening.

Bryon

2.75/5 (4 votes)

Expand Tree View

Lorraine Concos

5:28 28 Sep '05

Excellent code for Tree View, but we get an error when we want to expand Tree View automatically (the error is in line 80 of tree_view.js, key not recognized). Can someone send us an example with Tree View Expanded?
Sign In·View Thread·PermaLink	2.25/5 (4 votes)

Re: Expand Tree View

Bryon Baker

11:25 28 Sep '05

The reason you are getting the error is that the Expand() and Collapse() methods are old ones that I forgot to delete. They won't work as they stand.

The way Tree View works is that is creates a hash that uniquely identifies every node. When you click on the expand or collapse symbols (+ or -) the hash is passed so that it can work out which one needs to be expanded or collapsed.

You need to modify the Expand and Collapse methods to pass these hash keys.

Regards,

Bryon

2.00/5 (2 votes)

line provision

Sudhakar J

2:17 27 Sep '05

good work How to see lines on ur stuff
Sign In·View Thread·PermaLink	3.50/5 (2 votes)

Re: line provision

Sudhakar J

2:32 27 Sep '05

and also where is the provision to store value for particular node
Sign In·View Thread·PermaLink

expand tree node

mwong7025

17:14 8 Aug '05

Good treeview. Question: how do you set to expand a default tree node intialially upon creation?
Sign In·View Thread·PermaLink

Re: expand tree node

Bryon Baker

0:46 9 Aug '05

Change the CreateDiv() method to be:

// Creates a new DIV tag and appends it to parent if parent is not null.
// Returns the new DIV tag.
function CreateDiv( parent, id, expand )
{
div=document.createElement("DIV");
if( parent != null )
parent.appendChild( div );

div.setAttribute( "id", "D"+id );
if( expand == true )
div.style.display = "block";
else
div.style.display = "none";
div.style.marginLeft = "2em";

return div;
}

Add another parameter to the CreateTreeNode() and pass it down the chain.

There is an old Expand() method that I forgot to delete. It will almost do what you want. With a small mod, if you call it it will expand the entire tree.

Regards,

Bryon

5.00/5 (1 vote)

Thanks

EEmadzadeh

16:59 6 Aug '05

Tankx,very nice treeview, i used AJAX to make it more dynamic
Sign In·View Thread·PermaLink

Re: Thanks

Sudhakar J

5:54 27 Sep '05

i too have similar requirement , when i click particular node i should populate some other nodes from server (i am using script callback instead of AJAX) , so for this i need to assign some particular value for nodes , can u help on this Thanks Sudhakar
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

Last Visit: 11:38 8 Nov '09 Last Update: 11:38 8 Nov '09

12 Next »

General News Question Answer Joke Rant Admin

PermaLink | Privacy | Terms of Use
Last Updated: 16 Mar 2005
Editor: Smitha Vijayan