Browse DevX
Sign up for e-mail newsletters from DevX


DHTML Collapsing Treeview

How to build a collapsible tree view control in DHTML and call it from either VBScript or VB.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

y now, I'm sure that you have some Web development experience, either with VB DHTML applications, or HTML pages using VBScript. If not, then you will soon, so pay attention. We'll build a collapsible treeview using DHTML. Along with gaining an understanding of a very useful technique, you will be learning some neat features of DHTML, such as event bubbling and working the DHTML hierarchy.

First, you must make sure that your browser supports DHTML. Then, we will build a treeview that can have an endless amount of sub-nodes and expands and collapses when a parent node is clicked. The HTML for the tree is made up of tags with two classes. The parent class represents a parent node, and the childrenContainer class represents a container for all the children of a parent node. Any element within the document can be a parent class and have its own collection of children in a childrenContainer class. The HTML is listed at the end of this page.

Now let's talk about the code. DHTML is arranged in a hierarchy with the Window object (BaseWindow in VB) at the top. After that comes the Document object, then the rest of the elements of the page are children of the Document object and are hierarchically arranged as they are nested within each other. When an event is raised for an element it is also raised for all its parent elements, which is known as event bubbling. To access the child elements of an element you can either use the Children property, which returns all the immediate children, or the All property, which returns all children regardless of how many levels deep they are.

The code for the treeview works as follows. In the Document's on_click event we check to see which class of element raised the event. If it is a parent class, then we get its child element that is a childrenContainer class and toggle its visibility. Here's the code for VBScript, to run it in a VB DHTML application, just change the Window object on the second line to BaseWindow.

Sub document_onclick set obj=window.event.srcElement select case obj.className case "parent" set objChildren=getChildbyClass(obj.children) if objChildren.style.display="none" then objChildren.style.display="inline" else objChildren.style.display="none" end if end select End Sub Function getChildbyClass(children) for i=0 to children.length-1 if children(i).classname="childContainer" then set getChildbyClass =children(i) exit for end if next End function

For the final touch we'll add a little style so that child elements are indented and that the cursor changes to a hand when it moves over a parent node. The HTML for the style is listed together with HTML below. (Click here to see an example)

<style> span{position:relative;left:45pt} .parent{cursor:hand} .childContainer{cursor:default} </style> <BODY> <div class="parent">Parent 1 <span class="childContainer"> <div>Child 1</div> <div>Child 2</div> <div>Child 3</div> </span> </div> <div class="parent">Parent 2 <span class="childContainer"> <div class="parent">Child 1 <span class="childContainer"> <div class="parent">Grandchild 1 <span class="childContainer"> <div>Great Grandchild 1</div> <div>Great Grandchild 2</div> <div>Great Grandchild 3</div> </span> </div> <div>Grandchild 2</div> <div>Grandchild 3</div> </span> </div> <div>Child 2</div> <div>Child 3</div> </span> </div> <div class="parent">Parent 3 <span class="childContainer"> <div>Child 1</div> <div>Child 2</div> <div>Child 3</div> </span> </div> </body>

Michael Gellis works at Flash Creative Management (a Microsoft Partner) as a Visual Basic developer. He is a Microsoft Certified Professional in VB5 and VB6 and is co-writing a book for Sybex on VB 6.0 and distributed applications. You can reach him here.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date