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> 

Comments