When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
ASP ASP.NET ASP FAQs Message Board Feedback
Print this page.
Published: Wednesday, February 20, 2002

Enhancing the Dynamic Tree Menu System

By Sam M. Reynoso

In the summer of 2001, 4GuysFromRolla.com published an article I wrote entitled A Dynamic Tree Menu System that described how to build a Web-based treeview control using only ASP, XML, and Javascript. After its publication I began receiving email from many developers who had incorporated my solution into their projects. Most were happy with the sample code I provided, but a few were critical and pointed out a laundry list of things they wished were included in the sample.

- continued -

I took many of their suggestions into consideration, and over the course of the last six months completely rewrote the sample code from scratch. The code is now streamlined and includes many of the features that were requested. This follow-up article is an attempt to share these improvements with the 4Guys community. This article assumes the reader is familiar with the basic underlying mechanism described in the original article. (You're strongly encouraged to read the original article before reading this followup.)

Microsoft's XML Parser
To use the Dynamic Tree Menu System you will need to have Microsoft's XML parser (MSXML) installed on your Web server. You can get the free MSXML parser download at: http://www.microsoft.com/xml/. (Go straight to the download page.)

This article contains, mostly, a description of the changes between my earlier version of the Dynamic Tree Menu System and this updated version. You can download the complete source code for this application at the end of this article. You can also view a live demo of the dynamic menu-based system.

Crossbrowser Compatibility
The original sample code worked beautifully on Internet Explorer, but did not work at all under Netscape or any other browser. Although the original article clearly stated that the sample code was intended only as a demonstration of what was possible with XML, ASP, and Javascript, many readers nevertheless insisted that cross-browser compatibility should have been taken into consideration.

It turns out that making the code run under Netscape 6.x required very few modifications. Unfortunately Netscape 4.x was a completely different story, since that browser cannot deal with multiple levels of nested tables (the sample code will crash the browser). (Special thanks go out to 4Guys reader Keith Parker who suggested the simple changes to support Netscape 6.x and Mozilla browsers.)

The original code handled mouse clicks with a handful of IE-specific functions. For example, all folder clicks were captured by the document.onclick which redirected them to the doChangeTree() function with this line of code:

document.onclick = doChangeTree;

Once inside that function, a reference to the clicked object was obtained with the following line:

srcElement = window.event.srcElement;

If the code determined that the clicked item was a folder, a reference to that object was obtained using the document.all() method.

To make this code work with Netscape 6.x browsers, it was necessary to find a way to call the doChangeTree() routine whenever a folder was clicked. The solution was to connect the function to the onClick event on the folder's <IMG> tag. We also had to pass the Javascript this object as one of the parameters:

<img onclick="doChangeTree(this, arClickedElementID, arAffectedMenuItemID);">

Inside of doChangeTree(), we no longer have to rely on the IE method window.event.srcElement to retrieve the clicked object's reference. Instead we get the reference directly from the e parameter containing the this object.

Finally, when it is necessary to lookup an object's reference dynamically using its ID, we call the standard document.getElementById() function instead of the IE-specific function document.all. To summarize, here are the code differences between the original and the new crossbrowser version:

========  ORIGINAL CODE  ========  
document.onclick = doChangeTree; 

========  CROSSBROWSER CODE  =========
<img onclick="doChangeTree(this, arClickedElementID, arAffectedMenuItemID);">

======== ORIGINAL CODE ======== function doChangeTree() { var srcElement = window.event.srcElement; . . . ======== CROSSBROWSER CODE ========= function doChangeTree(e, arClickedElementID, arAffectedMenuItemID) { var srcElement = e; . . .
======== ORIGINAL CODE ======== function fnLookupElementRef(sID) { var i; var iClickedElemLen = arClickedElementID.length; for (i=0;i<iClickedElemLen;i++) if (arClickedElementID[i] == sID) return document.all(arAffectedMenuItemID[i]); . . . ======== CROSSBROWSER CODE ========= function fnLookupElementRef(sID, arClickedElementID, arAffectedMenuItemID) { var i; for (i=0;i<arClickedElementID.length;i++) if (arClickedElementID[i] == sID) return document.getElementById(arAffectedMenuItemID[i]); . . .

In Part 2 we'll look at some more new features of the Dynamic Tree Menu System, including some UI enhancements and the ability to load the tree menu data from a database table.

  • Read Part 2!

  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article