CFTREEITEM |
Description
Populates a form tree control, created with the cftree tag, with elements. To display icons, you can use the img values that ColdFusion provides, or reference your own icons.
Category
Forms tags

Syntax

    <cftreeitem
       value = "text"
       display = "text"
       parent = "parent_name"
       img = "filename"
       imgopen = "filename"
       href = "URL"
       target = "URL_target"
       query = "queryname"
       queryAsRoot = "Yes" or "No"
       expand = "Yes" or "No">

See also
cfapplet, cfform, cfgrid, cfgridcolumn, cfgridrow, cfgridupdate, cfinput, cfselect, cfslider, cftextinput, cftree
Usage
This tag requires the client to download a Java applet. Downloading an applet takes time; therefore, using this tag might be slightly slower than using an HTML form element or the cfinput tag to get the same information.
For this tag to work properly. the browser must be JavaScript-enabled.

Example

    <!--- This example shows the use of cftreeitem in cfform. Query takes
    employee list, and uses cftree and cfselect to display query results.
    Shows an alternate means of displaying the data --->
    <!--- set a default for the employeeNames variable --->
    <cfparam name = "employeeNames" default = "">
    <!--- if an employee name has been passed from the form, set employeeNames
    variable to this value ---Auto>
    <cfif IsDefined("form.employeeNames")>
       <cfset employeeNames = form.employeeNames>
    </cfif>
    <!--- query the datasource to find the employee information--->
    <cfquery name = "GetEmployees" dataSource = "cfsnippets">
    SELECT Emp_ID, FirstName, LastName, EMail, Phone, Department
    FROM   Employees
       WHERE 0=0
       <cfif employeeNames is not "">
             AND LastName = '#employeeNames#'
       </cfif>
    </cfquery>

    <!--- Use cfform when using other cfinput tools --->
    <cfform action = "cfindex.cfm">
    <!--- Use cfselect to present the contents of the query by column --->
    <h3>cfselect Presentation of Data</h3>
    <h4>Click an employee's last name and click "see information for this employee"
       to see expanded information.</h4>

    <cfselect name = "EmployeeNames" message = "Select an Employee Name"
       size = "#getEmployees.recordcount#" query = "GetEmployees"
      value = "LastName" required = "No">
       <option value = "">Select All
    </cfselect>

    <input type = "Submit" name = ""
       value = "see information for this employee">
    <!--- showing use of cftree for expanded presentation of data --->
    <!--- Loop through the query to create each branch of the cftree --->
    <h3>cftree Presentation of Data</h3>
    <h4>Click the folders to "drill down" and reveal information.</h4>
    <p>cftreeitem is used to create the branches of the cftree.

    <p><cftree name = "SeeEmployees" height = "150" width = "240"
       font = "Arial Narrow" bold = "No"    italic = "No" border = "Yes"
       hScroll = "Yes" vScroll = "Yes"    required = "No" completePath = "No"
       appendKey = "Yes" highlightHref = "Yes">
    <cfloop query = "GetEmployees">
       <cftreeitem value = "#Emp_ID#" parent = "SeeEmployees" expand = "No">
       <cftreeitem value = "#LastName#" display = "Name"
          parent = "#Emp_ID#" queryAsRoot = "No"       expand = "No">
       <cftreeitem value = "#LastName#, #FirstName#"
          parent = "#LastName#" expand = "No"       queryAsRoot = "No">
       <cftreeitem value = "#Department#" display = "Department"
          parent = "#Emp_ID#" queryAsRoot = "No"       expand = "No">
       <cftreeitem value = "#Department#"
          parent = "#Department#"       expand = "No" queryAsRoot = "No">
       <cftreeitem value = "#Phone#" display = "Phone"
          parent = "#Emp_ID#" queryAsRoot = "No"       expand = "No">
       <cftreeitem value = "#Phone#"
          parent = "#Phone#"       expand = "No" queryAsRoot = "No">
       <cftreeitem value = "#Email#" display = "Email"
          parent = "#Emp_ID#" queryAsRoot = "No"       expand = "No">
       <cftreeitem value = "#Email#"
          parent = "#Email#"       expand = "No" queryAsRoot = "No">
    </cfloop>
    </cftree>

    <!--------For a more comprehensive, quicker view, you can use CFGRID ------->
    <h3>cfgrid Presentation of Data</h3>
    <cfgrid name="SampleGrid" width="600" query="GetEmployees"    insert="No"
       delete="No" sort="No" font="Verdana" bold="No"    italic="No" appendkey="No"
       highlighthref="No" griddataalign="LEFT"    gridlines="Yes" rowheaders="No"
       rowheaderalign="LEFT" rowheaderitalic="No"       rowheaderbold="No"
    colheaders="Yes"
       colheaderalign="CENTER"    colheaderitalic="No" colheaderbold="No"
       bgcolor="Teal" selectmode="BROWSE" picturebar="No">
    <cfgridcolumn name="LastName" header="Last Name" headeralign="LEFT"
       dataalign="LEFT" bold="No" italic="No" select="Yes" display="Yes"
       headerbold="No" headeritalic="No"> <cfgridcolumn name="FirstName"
       header="First Name" headeralign="LEFT" dataalign="LEFT" fontsize="2"
       bold="No" italic="No" select="No" display="Yes" headerbold="No"
       headeritalic="No">
    <cfgridcolumn name="Email" header="Email" headeralign="LEFT" dataalign="LEFT"
       bold="No" italic="No" select="No" display="Yes" headerbold="No"
       headeritalic="No">
    <cfgridcolumn name="Phone" header="Phone" headeralign="LEFT" dataalign="LEFT"
       bold="No" italic="Yes" select="No" display="Yes" headerbold="No"
       headeritalic="No"> <cfgridcolumn name="Department" header="Department"
       headeralign="LEFT" dataalign="LEFT" bold="Yes" italic="No" select="No"
       display="Yes" headerbold="No" headeritalic="No">
    <cfgridcolumn name="Emp_ID" header="ID" headeralign="LEFT" dataalign="LEFT"
       width="40" bold="No" italic="No" select="No" display="Yes" headerbold="No"
       headeritalic="No">
    </cfgrid>
    </cfform>

VALUE |
| Required
Value passed when cfform is submitted. When populating a tree with data from a cfquery, specify columns in a delimited list. Example: value = "dept_id,emp_id"

DISPLAY |
| Optional
Default value: "value" Tree item label. When populating a tree with data from a query, specify names in a delimited list. Example: display = "dept_name,emp_name"

PARENT |
| Optional
Value for tree item parent.

IMG |
| Optional

Default value: "folder"

Image name, filename, or file URL for tree item icon.

The following values are provided:

- cd
- computer
- document
- element
- folder
- floppy
- fixed
- remote

You can specify a custom image. To do so, include path and file extension; for example:

img = "../images/page1.gif"

To specify more than one image in a tree, or an image at the second or subsequent level, use commas to separate names, corresponding to level; for example:

img = "folder,document"

img = ",document" (example of second level)

IMGOPEN |
| Optional
Icon displayed with open tree item. You can specify icon filename with a relative path. You can use a ColdFusion image.

HREF |
| Optional

URL to associate with tree item or query column for a tree that is populated from a query. If href is a query column, its value is the value populated by query. If href is not recognized as a query column, it is assumed that its text is an HTML href.

When populating a tree with data from a query, HREFs can be specified in delimited list; for example:

href = "http://dept_svr,http://emp_svr"

TARGET |
| Optional
Target attribute of href URL. When populating a tree with data from a query, specify target in delimited list: target = "FRAME_BODY,_blank"

QUERY |
| Optional
Query name to generate data for the treeitem.

QUERYASROOT |
| Optional

Defines query as the root level. This avoids having to create another parent cftreeitem.

- Yes
- No
- String to use as the root name

If you do not specify a root name, ColdFusion returns the query name as the root.

EXPAND |
| Optional

Default value: "Yes"

- Yes: expands tree to show tree item children
- No: keeps tree item collapsed