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 labyrinthine of CFTREE constructs.

Note

The following tree examples all use the result set from folllowing query. To run any of the tree examples, insert the query into your test template:

<!--- 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>

Example: One-level tree control

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

<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: Multi-level tree control

When populating a CFTREE, you manipulate the structure of the tree by specifying a TREEITEM parent. In this example, every TREEITEM, except the top level, specifies a parent. The PARENT attribute allows your CFTREE to show the relationships between elements in the tree control.

<CFFORM NAME="form1" 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 TYPE="Image" attribute, ColdFusion attempts to display an image corresponding to the value in the column, which can be a built-in ColdFusion image name, or an image of your choice in the cfide\classes directory or subdirectory, referenced with a relative URL.

The built-in image names are:

cd
computer
document
element
folder
floppy
fixed
remote

Developing Web Applications with ColdFusion
Chapter 10 : Building Dynamic Forms