
Contents > Developing ColdFusion MX Applications > Building Dynamic Forms > Building tree controls with cftree

Building tree controls with cftree

The cftree tag lets you display hierarchical information within a form in a space-saving collapsible tree populated from data source queries. To build a tree control with cftree, you use individual cftreeitem tags to populate the control. You can specify one of six built-in icons to represent individual items in the tree control, or supply a file path or URL to your GIF image.

Note: The cftree tag requires the client to download a Java applet. Downloading an applet takes time; therefore, using cftree can be slightly slower than using an HTML form element to retrieve the same information. In addition, browsers must be Java-enabled for cftree to work properly.

To create and populate a tree control from a query:

Create a ColdFusion page with the following content:

<cfquery name="engquery" datasource="CompanyInfo">
   SELECT FirstName + ' ' + LastName AS FullName
   FROM Employee
</cfquery>
<cfform name="form1" action="submit.cfm">
<cftree name="tree1" 
   required="Yes" 
   hscroll="No">
   <cftreeitem value="FullName"
      query="engquery"
      queryasroot="Yes"
      img="folder,document">
</cftree>
</cfform>

Save the page as tree1.cfm and view it in your browser.
The following figure shows the output of this code:

Reviewing the code

The following table describes the highlighted code and its function:

Code	Description
<cftree name="tree1"	Creates a tree and name it tree1.
required="Yes"	Specifies that a user must select an item in the tree.
hscroll="No"	Does not allow horizontal scrolling.
<cftreeitem value="FullName" query="engquery"	Creates an item in the tree and put the results of the query named engquery in it. Because this tag uses a query, it puts one item on the tree per query entry.
queryasroot="Yes"	Specifies the query name as the root level of the tree control.
img="folder,document"	Uses the images "folder" and "document" that ship with ColdFusion in the tree structure. When populating a `cftree` with data from a `cfquery`, you can specify images or filenames for each level of the tree as a comma-separated list.


Contents > Developing ColdFusion MX Applications > Building Dynamic Forms > Building tree controls with cftree

Version 6.1

Comments are no longer accepted for ColdFusion MX 6.1. ColdFusion 8 is the current version.

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/coldfusion/6.1/htmldocs/dynamic8.htm