How to Bind a Tree Grid to Coldfusion

A ColdFusion tree is one that displays hierarchical data. You use the ColdFusion loop tags to loop through each data item and bind it to a tree element in your Web pages. You typically use this feature when you have several items of information such as a site map that you want users to drill down to find the necessary information on your site.

Instructions

1. Open the Adobe ColdFusion editing software from the Windows program menu. Open the project you want to edit and double-click the file you want to use for the tree structure.

2. Create the nodes for the tree. Each item in the tree is called a node, and it indicates a section of your website. The following code creates the nodes for the tree:

   <cfloop from="1" to="10" index="i">
   <cfset x = x+1/>
   <cfset s = structNew()/>
   <cfset s.value=#x#>
   <cfset s.display="Node #i#">
   <cfset arrayAppend(result,s)/>
   </cfloop>

3. Bind the data to the tree. After the nodes are completed, you bind your data to the nodes' values. The following code adds the data:

   <cfloop from="1" to="#arguments.value#" index="q">
   <cfset y = y + 1/>
   <cfset s = structNew()/>
   <cfset s.value=#q#>
   <cfset s.display="Leaf #q#">
   <cfset s.leafnode=true/>
   <cfset arrayAppend(result,s)/>
   </cfloop>

4. Click the "Save" button and run the new code in your browser to test the function and view the tree.

References

• Intermediate ColdFusion Tutorials: Coldfusion 8 CFTree