The CFTREE form lets you display hierarchical information 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.
![]() |
To create and populate a tree control from a query: |
tree1.cfm
in Studio.
<CFQUERY NAME="engquery" DATASOURCE="CompanyInfo"> SELECT FirstName + ' ' + LastName AS FullName FROM EMPLOYEES </CFQUERY> <CFFORM NAME="form1" ACTION="submit.cfm" METHOD="Post"> <CFTREE NAME="tree1" REQUIRED="yes" HSCROLL="no" VSCROLL="yes"> <CFTREEITEM VALUE=FullName QUERY="engquery" QUERYASROOT="yes" IMG="folder,document"> </CFTREE> </CFFORM>
Code | Description |
---|---|
<CFTREE NAME="tree1" | Create a tree and name it tree1. |
REQUIRED="yes" | Specify that a user must select an item in the tree. |
HSCROLL="no" | Don't allow horizontal scrolling. |
VSCROLL="yes"> | Allow vertical scrolling. |
<CFTREEITEM VALUE=FullName QUERY="engquery" | Create an item in the tree and put the results of the query named engquery in it. |
QUERYASROOT="yes" | Specify the query name as the root level of the tree control. |
IMG="folder,document" | Use the images "folder" and "document" that ship with ColdFusion in the tree structure. |
In a similar query, you may want to organize your employees by the department. In this case, you separate column names with commas in the CFTREEITEM VALUE attribute
![]() |
To organize the tree based on ordered results of a query: |
tree2.cfm
in Studio.
<!--- CFQUERY with an ORDER BY clause ---> <CFQUERY NAME="deptquery" DATASOURCE="CompanyInfo"> SELECT Department_ID, FirstName + ' ' + LastName AS FullName FROM EMPLOYEES ORDER BY Department_ID </CFQUERY> <!--- Build the tree control ---> <CFFORM NAME="form1" ACTION="submit.cfm" METHOD="Post"> <CFTREE NAME="tree1" HSCROLL="no" VSCROLL="no" BORDER="yes" HEIGHT="350" REQUIRED="yes"> <CFTREEITEM VALUE="Department_ID, FullName" QUERY="deptquery" QUERYASROOT="Department_ID" IMG="cd,folder"> </CFTREE> <BR><INPUT TYPE="Submit" VALUE="Submit"> </CFFORM>
Code | Description |
---|---|
ORDER BY Department_ID | Order the query results by department. |
<CFTREEITEM VALUE="Department_ID, FullName" | Popluate the tree with the Department ID, and under each department, the Full Name for each employee in the department |
QUERYASROOT="Department_ID" | Make the Department ID the root of the tree |
IMG="cd,folder"> | Use the ColdFusion-supplied images CD and Folder. |
Note that the comma-separated items in the IMG and the VALUE attributes correspond. If you leave out the IMG attribute, ColdFusion uses the folder image for all levels in the tree.
The CFTREE tag allows you to force a user to select an item from the tree control by setting the REQUIRED attribute to YES. With or without the REQUIRED attribute, ColdFusion passes two form variables to the application page specified in the CFTREE ACTION attribute:
The root part of the path is only returned if you set the COMPLETEPATH attribute tof CFTREE to YES; otherwise, the path value starts with the first node.
In the previous example, if the user selects the name "John Allen" in this tree, the following form variables are returned by ColdFusion:
form.tree1.node = John Allen form.tree1.path = Department_ID\3\John Allen
You can specify the backslash character used to delimit each element of the path form variable in the CFTREE DELIMITER attribute.
Although, the CFTREE does not include a VALIDATE attribute, you can use the REQUIRED attribute to force a user to select an item from the tree control. In addition, you can use the ONVALIDATE attribute to specify the JavaScript code to perform validation.