Solved

Using CFTREE to show recursive relationships

Posted on 2012-04-13
6
1,136 Views
Last Modified: 2012-04-14
I'm struggling to expose a hierarchical query as a tree view in ColdFusion.  I just can't figure out the mechanics.  
Initially I want to expose it without a bind to a cfc.  Then I want to expose it with a bind to a cfc so I can take advantage of the complete tree not loading until it is clicked.

Here is what the first level needs to be exposed as:
First Level ExposedWhen you open all the levels:
Expanded
Here a sample table which ties the parent and children together.
CREATE TABLE mycurric
    (parent_cd_crs                  VARCHAR2(30 BYTE),
    child_cd_crs                   VARCHAR2(30 BYTE))
/
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('MASTERCU','CRSA');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('MASTERCU','LEVEL1ACU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('MASTERCU','LEVEL1BCU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('MASTERCU','LEVEL1CCU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1ACU','CRSB');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1ACU','CRSC');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1ACU','CRSD');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1ACU','CRSE');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1BCU','LEVEL2ACU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1BCU','LEVEL2BCU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1BCU','LEVEL2CCU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1CCU','CRSC');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL1CCU','CRSG');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL2ACU','CRSA');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL2ACU','CRSF');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL2BCU','CRSG');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL2CCU','LEVEL3ACU');
INSERT INTO mycurric (CURRIC_CD_CRS,CHILD_CD_CRS) 
VALUES('LEVEL3ACU','CRSD');

Open in new window


My attempt which didn't yield what I expected
<html>
<title> my curric TreeExample</Title>

<body>
    <cfform name="myform">
	
	<cfquery name="GetList" datasource="myConn" username="myuser" password="mypad">
            SELECT parent_cd_crs, child_cd_crs from mycurric</cfquery> 
	
	
        <cftree name="treeTest" height="400" width="200" format="html">
        <cftreeitem 
            query="GetList" 
            value="parent_cd_crs,child_cd_crs" 
			parent="parent_cd_crs"
            display="parent_cd_crs, child_cd_crs" 
			queryasroot="NO" expand="no">
        </cftree>
    <hr>
	
	
</cfform>
</body>
</html>

Open in new window


My output looks like this as it doesn't walk up tree
Bad Tree
0
Comment
Question by:E43509
  • 3
  • 2
6 Comments
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 37845153
Looks like this a CF Bug .


Here is my test code.

<cfset qry=QueryNew("id,parentid,title","Integer,Integer,VarChar")>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",1)>
<cfset tt=QuerySetCell(qry,"title","Node 1")>
<cfset tt=QuerySetCell(qry,"parentid",0)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",11)>
<cfset tt=QuerySetCell(qry,"title","Node 1.1")>
<cfset tt=QuerySetCell(qry,"parentid",1)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",111)>
<cfset tt=QuerySetCell(qry,"title","Node 1.1.1")>
<cfset tt=QuerySetCell(qry,"parentid",11)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",12)>
<cfset tt=QuerySetCell(qry,"title","Node 1.2")>
<cfset tt=QuerySetCell(qry,"parentid",1)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",2)>
<cfset tt=QuerySetCell(qry,"title","Node 2")>
<cfset tt=QuerySetCell(qry,"parentid",0)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",21)>
<cfset tt=QuerySetCell(qry,"title","Node 2.1")>
<cfset tt=QuerySetCell(qry,"parentid",2)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",211)>
<cfset tt=QuerySetCell(qry,"title","Node 2.1.1")>
<cfset tt=QuerySetCell(qry,"parentid",21)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",22)>
<cfset tt=QuerySetCell(qry,"title","Node 2.2")>
<cfset tt=QuerySetCell(qry,"parentid",2)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",3)>
<cfset tt=QuerySetCell(qry,"title","Node 3")>
<cfset tt=QuerySetCell(qry,"parentid",0)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",31)>
<cfset tt=QuerySetCell(qry,"title","Node 3.1")>
<cfset tt=QuerySetCell(qry,"parentid",3)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",311)>
<cfset tt=QuerySetCell(qry,"title","Node 3.1.1")>
<cfset tt=QuerySetCell(qry,"parentid",31)>

<cfset tt=QueryAddRow(qry)>
<cfset tt=QuerySetCell(qry,"id",32)>
<cfset tt=QuerySetCell(qry,"title","Node 3.2")>
<cfset tt=QuerySetCell(qry,"parentid",3)>

<cfform name="f1" format="html">
      <table>
            <tr>
                  <td>TREE (QUERY)
                  </td>
                  <td>TREE (LOOP)
                  </td>
            </tr>
            <tr>
                  <td>
      <cftree format="html" name="Testtree1" label="TREE1 (BUG ???)"  >
                  <cftreeitem query="qry"   value="id" display="title" parent="parentid"/>
      </cftree>
                        
                  </td>
                  <td>
      <cftree format="html" name="Testtree2"  label="TREE2 (WORKS)" >
            <cfloop query="qry"  >
                  <cftreeitem  value="#id#" display="#title#" parent="#parentid#"/>
            </cfloop>
      </cftree>
                        
                  </td>
            </tr>
      </table>
            
</cfform>
0
 

Author Comment

by:E43509
ID: 37845225
Thank you.
I've been beating myself up trying to noodle out how this tag worked and not getting anything good out of it.
Appreciate your timely response.
I was wondering if I should stay away from the cftree tag and devote my efforts toward a javascript/css solution instead?  I could not find a lot of info when I google'd CFTREE.  
Which way would you lean?
Thanks again.
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37846064
yes, certainly a CSS?javascript/Jquery Solution would be much better, if you still wanna use cftree, i suggest you to look into the custom tag cfx_tree which is free and quite advantageous ranther than cftree.

or you can create a custom tag to make recursive calls. but that may slow down the things
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

Author Comment

by:E43509
ID: 37846167
Thanks.
I could not find cfx_tree in my searches ... do you have a url?
I found a cf_dbtree ($)
0
 

Author Closing Comment

by:E43509
ID: 37846168
Excellent and robust response.
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 37846228
i checked this too

http://www.cftagstore.com/tags/cftreecontrol.cfm

a customtag but worth its usage
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question