Developing ColdFusion Applications
Building Dynamic Forms

Structuring Tree Controls

Tree controls built with cftree can be very complex. Knowing how to specify the relationship between multiple cftreeitem entries will help you handle even the most complex of cftree constructs.

Example: one-level tree control

This example consists of a single root and a number of individual items:

<cfquery name="deptquery" datasource="CompanyInfo">
  SELECT Dept_ID, FirstName + ' ' + LastName
  AS FullName
  FROM Employee
  ORDER BY Dept_ID
</cfquery>

<cfform name="form1" action="submit.cfm">
  <cftree name="tree1">
    <cftreeitem value="FullName"
    query="deptquery"
    queryasroot="Department">
  </cftree>
<br>
<input type="submit" value="Submit">
</cfform>

Example: multilevel tree control

When populating a cftree, you manipulate the structure of the tree by specifying a cftreeitem parent. In this example, every cftreeitem, except the top level, specifies a parent. The parent attribute allows your cftree to show the relationships between elements in the tree control. (This example populates the tree directly, not with a query.)

<cfform name="form2" action="cfform_submit.cfm"

  method="Post">
<cftree name="tree1" hscroll="No" vscroll="No"
  border="No">
  <cftreeitem value="Divisions">
  <cftreeitem value="Development" 
    parent="Divisions" img="folder">
  <cftreeitem value="Product One" 
    parent="Development">
  <cftreeitem value="Product Two" 
    parent="Development">
  <cftreeitem value="GUI" 
    parent="Product Two" img="document">
  <cftreeitem value="Kernel" 
    parent="Product Two" img="document">
  <cftreeitem value="Product Three" 
    parent="Development">
  <cftreeitem value="QA" 
    parent="Divisions" img="folder">
  <cftreeitem value="Product One"
    parent="QA">
  <cftreeitem value="Product Two" parent="QA">
  <cftreeitem value="Product Three"
    parent="QA">
  <cftreeitem value="Support"
    parent="Divisions" img="fixed">
  <cftreeitem value="Product Two"
    parent="Support">
  <cftreeitem value="Sales"
    parent="Divisions" img="cd">
  <cftreeitem value="Marketing"
    parent="Divisions" img="document">
  <cftreeitem value="Finance"
    parent="Divisions" img="element">
</cftree>

</cfform>

Image names in a cftree

When you use the img attribute, ColdFusion displays the specified image beside the tree items. You can specify a built-in ColdFusion image name or the URL of an image of your choice, such as http://localhost/Myapp/Images/Level3.gif. As a general rule, your custom images should be less than 20 pixels high.

The built-in image names are:

• cd
• computer
• document
• element
• folder
• floppy
• fixed
• remote

Copyright © 2001, Macromedia Inc. All rights reserved.

Return to Firstserv.com | ColdFusion Hosting | Macromedia LiveDocs