User Guide

150 Chapter 9 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"