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:

  1. Create a ColdFusion page with the following content:
    2. <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>
  2. Save the page as tree1.cfm and view it in your browser.

    3. The following figure shows the output of this code:


    Tree control populated from a query

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.

View comments on LiveDocs