data grid control

Advanced Treeview Tree Menu

[ Tree Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]

Advanced Treeview Tree Menu

Demos and Examples - First Tree

This first demo is a basic tree to show how nodes on the tree are built.

Nodes A and B are both attached to the root making them the top level. Nodes C and D have Node B as their parent, Node E has D as the Parent and finally Node F has Node E as it's parent.

This is how the nodes are defined in the data file:-

nodeA|root|Node A Text
nodeB|root|Node B text

nodeC|nodeB|Node C Text
nodeD|nodeB|node D Text

nodeE|nodeD|node E Text
nodeF|nodeE|node F Text

The first element is the Node ID, the second specifies the Parent Node ID (or root) and the third element is the text of that node.

There is no restriction on the number of nodes or the number of levels. Therefore it is possible to build any tree structure required.

 


(if you do not see the tree above
click here»
)

There are no restrictions on the number of nodes or the number of levels. Therefore it is possible to build any tree structure required.

The colors, fonts and various other properties of the tree are set via HTML Param tags. Here is the HTML code for the above tree:-

<applet code="TreeApplet" width="220" height="200" archive="Treemenu.jar">

<!-- Tree Properties -->
<param name="backgroundColor" value="#FFEECC">
<param name="borderWidth" value="1">
<param name="borderColor" value="#CCBB88">
<param name="underlineLinks" value="false">
<param name="scrollBarBgColor" value="#FFAA00">
<param name="statusBar" value="false">


<param name="connectingLines" value="true">
<param name="connectingLinesColor" value="#887744">
<param name="connectingLinesStyle" value="2">

<param name="highTextColor" value="#FFFFFF">
<param name="highBgColor" value="#0000FF">

<param name="nodeOffset" value="25">
<param name="nodegap" value="0">


<!-- Default Node Settings -->
<param name="defaultTarget" value="_top">
<param name="defaultFont" value="Arial,N,10">
<param name="defaultColor" value="#000000">
<param name="defaultExpanded" value="false">

<param name="defaultNormalImage" value="closedfolder">
<param name="defaultExpandedImage" value="openfolder">
<param name="defaultMouseImage" value="point">

<!-- Images -->
<param name="image1" value="closedfolder|./iconimages/closedfolder.gif">
<param name="image2" value="openfolder|./iconimages/openfolder.gif">
<param name="image3" value="document|./iconimages/document.gif">
<param name="image4" value="point|./iconimages/point.gif">


<!-- Node File -->
<param name="Nodedata" value="firstnodes.txt">

</applet>

In the next demo we show how to build a larger tree menu and make the nodes link to other web pages - next demo»

« back to Demo Index

« back to Getting Started

[ Tree Home] [ Buy Now ] [ Documentation ] [ Examples & Demos ] [ Help & Support ]

Getting Started

Documentation

Examples

 

Buy Treeview Tree Menu