CFML Reference

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

Attributes

Attribute	Req/Opt	Default	Description
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	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	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	Yes	Yes: expands tree to show tree item children No: keeps tree item collapsed

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> 

Copyright © 2002, Macromedia Inc. All rights reserved.

Comments