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

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

A Dynamic Tree Menu System, Part 4

By Sam Reynoso


  • Read Part 1
  • Read Part 2
  • Read Part 3

  • In Part 3 we examined the most important function in menu.asp - DisplayNodes(). In this final part we'll take a closer look at the client-side JavaScript being used and wrap up the article, looking at possible enhancements and caveats.

    - continued -

    A Closer Look at the Javascript Code
    The javascript code is what controls the expansion and collapse of the folders. The fact that the code is executed on the client side means that the page gets updated very fast with no trips to the server.

    Once the page is fully rendered, our javascript code is fully equipped to manipulate the new menu. The first thing we encounter is an array declaration like this:

    var arClickedElementID = new Array( "1", "2", "3", "4", "5", "6", ...);
    var arAffectedMenuItemID = new Array( "2", "3", "4", "5", "6", ...);
    

    These arrays work together to help pinpoint the folder that should be expanded or collapsed. The first array, arClickedElementID[], contains the IDs for all the folders used in the tree. The second array, arAffectedMenuItemID[], contains the IDs for the "containers" that hold the folders. It is the properties of these containers that permit the folders to be hidden or displayed. The crude diagram below attempts to illustrate this:

    Menu Item 1 (ID=1)
    	------------------- (Container ID=2) 
    	|Menu Item 2	  |
    	|Menu Item 3	  |
    	-------------------
    

    Menu items 2 and 3 could be hidden as long as we know their container's ID. To actually make this happen, we rely on two javascript functions: fnLookupElementRef() and doChangeTree().

    Expanding/Collapsing Folders
    In order to process click events from the user, we need to wire the event to the doChangeTree() function. We accomplish this with the following line of code:

    document.onclick = doChangeTree;

    Essentially any clicks to the web page will be diverted to this function for proper handling. When the user clicks a menu item, the first thing we do is get a reference to the object that was clicked. Then we probe the name of its class and only continue if the string "LEVEL" is present at the beginning of the name. The following code demonstrates this:

       srcElement = window.event.srcElement;
    				
       //Only work with elements that have LEVEL in the classname
       if(srcElement.className.substr(0,5) == "LEVEL") 
       {
    

    Once we have cleared this requirement, we need a reference to the container that will be expanded or collapsed. We do this by calling the following line of code:

    targetElement = fnLookupElementRef(srcElement.id)

    We pass in the ID of the menu item that was clicked and fnLookupElementRef() probes the arClickedElementID[] and arAffectedMenuItemID[] arrays to get a reference to the container we need to manipulate. This is accomplished with a simple loop shown below:

          for (i=0; i<arClickedElementID.length; i++)
             if (arClickedElementID[i] == sID)
                return document.all(arAffectedMenuItemID[i]);
    

    We need a way to ignore clicks to empty folders. This is accomplished by using the string "empty" in the name of the icon for the empty folder. We have two icons that can be used in this situation (folderclosed-empty.gif and folderclosedjoin-empty.gif). We test for empty folders with the following code:

         var sImageSource = srcElement.src;
         if (sImageSource.indexOf("empty") == -1)
         {
            ...
    

    Finally we check for the current status of the folder. If it is collapsed, we expand it, and vice versa. The status is determined by checking the style.display property. A value of "none" means the menu item is hidden. An empty string means it is visible. We can control the appearance of a folder by manipulating this property. After checking the status of the folder, we reverse it and update the icons accordingly.

          if (targetElement.style.display == "none")
          {
             //Our menu item is currently hidden, so display it
             targetElement.style.display = "";
    								
             if (srcElement.className == "LEVEL1")
                //Set a special open-folder graphic for the root folder
                srcElement.src = "images/minusonly.gif";
             else
                //Otherwise, just show the open folder icon
                srcElement.src = "images/folderopen.gif";
          }
          else
          {
             ...
    

    Conclusion
    The Dynamic Tree Menu System offers a powerful and elegant way to add heirarchical tree navigation systems like those used in Windows Explorer to web applications. It takes full advantage of the strengths of ASP, XML, and Javascript to deliver a tree menu built using fully-formed HTML with embedded Javascript. Perhaps most importantly, it does this using only five ASP subroutines and functions, and two client-side Javascript functions.

    The sample code is ready to be used as is, but there is still plenty of room for improvement. First and foremost - it is not cross-browser compliant. The code will only run under IE (haven't tested with version 4, but probably works). Modifications would have to be made in the Javascript functions in order for the code to run correctly under Netscape browsers.

    Other modifications might include the addition of new properties to the XML elements. Suggestions could include support for tooltips, hard-coded icons, new document types, etc. New routines could be added to the ASP code to support adding or removing items from the tree. The javascript could be updated to support rollover effects for the menu items. The list could go on... Happy programming!!

  • By Sam Reynoso


    Attachments:

  • Download the complete code (in ZIP format)
  • View a live demo!


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