We help IT Professionals succeed at work.

How to open CFTree/HTML node from cflayoutarea?

1,283 Views
Last Modified: 2013-12-24
I'm using cflayout area "left" to display an html cftree that contains a heiarchial structure of a website and a cflayoutarea "center" that displays the childeren of a selected tree node. When clicking on the childeren in the center layout, how might I "open" the tree node in the left layout area.

Any help would really be appreciated!
Comment
Watch Question

Scott BennettManager Technology

Commented:
When you use cflayout/cflayoutarea there a number of javacsript functions that are available so you can control the cflayouaras with onclick/onblur/onfocus/etc events.

To select an item in a cflaoyoutarea you would use:

ColdFusion.Layout.selectTab('layoutname', 'layoutareaname')



Here is a list of all the cflayoutarea functions the all take the same input parameters (LayoutName, LayoutAreaName):

ColdFusion.Layout.createTab - Creates a tab in an existing tabbed layout.
 
ColdFusion.Layout.disableTab - Disables the specified tab so it cannot be selected.
 
ColdFusion.Layout.enableTab - Enables the specified tab so users can select it and display the area contents.
 
ColdFusion.Layout.hideTab - Hides a tab.
 
ColdFusion.Layout.selectTab - Selects a tab and displays the layout area contents.
 
ColdFusion.Layout.showTab - Shows a tab that was hidden using the inithide attribute or the hideTab() function.
 
ColdFusion.Layout.collapseArea - Collapses an area of a border layout.
 
ColdFusion.Layout.expandArea - Expands a collapsed area of a border layout.
 
ColdFusion.Layout.getTabLayout - Hides an area of a border layout.
 
ColdFusion.Layout.hideArea - Hides an area of a border layout.
 
ColdFusion.Layout.showArea - Shows an area of a border layout that was hidden using the inithide attribute or the hideArea() function.

If you post an example of your code I will be able to help you modify it to do what your want.
 

Author

Commented:
Hello SBennet...thank you very much for your response :-]

What I'm trying to accomplish is to set up this page so that it shows the structure of a website in a "windows" like format. The left pane displays folders that represent categories that can contain sub-categories thus sub-folders [childeren]. The "right" pane just displays a "list" of the childeren folders of the node that was clicked on in the tree.

Is there anyway, through the use of an onclick event, where upon clicking on a child folder in the "RIGHT" pane, to set it as the "active" or expanded node in the tree [left pane]?

Im using the bind feature via URL to display the right pane....

*********************** Layout / Tree Code ***********************
<cflayout type="Border" name="toplevellayout" style="margin:0px;height:400px;">
      <cflayoutarea  position="left" name="treepanel" title="Document Categories" size="250" style="padding-top:3px;" overflow="auto" collapsible="false" splitter="true" minsize="200">
                        <cfform>
                              <cftree name = "categorytree" font = "Arial Narrow" italic="yes" completepath="no" format="html">
                                    <cftreeitem value="0" display="Show All Documents" parent="categorytree" img="images/xpicons/text_tree_16.png" imgopen="folder">
      
                                    <cfoutput query="qry_get_cat_picklist" group="Parent_ID">
                                    <cfif Parent_ID IS 0>
                                          <cfset ParentID = ''>
                                    <cfelse>
                                          <cfset ParentID = Parent_ID>
                                    </cfif>
                                          <cfoutput>
                                                <cftreeitem value="#Category_ID#" display="#Name#" parent="#ParentID#" img="folder" imgopen="folder">
                                          </cfoutput>
                                    </cfoutput>
                              </cftree>
                        </cfform>
      </cflayoutarea>
      <cflayoutarea  position="center" name="documentwindow" overflow="hidden">
            <cfdiv bind="url:index.cfm?fuseaction=docs.list&display=list&category_id={categorytree.node}" />
      </cflayoutarea>
</cflayout>

*********************** Childeren listing code which is displayed in the right pane (via bind feature) ***********************
<cfinclude template="../category/getchilderencategories.cfm">

<table>
<cfoutput query="getchilderencategories">
<tr>
      <td><img src="/images/xpicons/folder_closed_24.png" alt="" width="24" height="24" border="0"></td>
      <td href="#ajaxLink('index.cfm?fuseaction=docs.list&display=list&category_id=#category_id#')#"  onclick="javascript:openTheTreeNode();" />#Name#</a></td>
</tr>
</cfoutput>
</table>
Scott BennettManager Technology

Commented:
What you need to do is use the ColdFusion.Tree.getTreeObject in your onclick event.

http://livedocs.adobe.com/coldfusion/8/htmldocs/JavaScriptFcns_26.html#1202734

and then you need to learn how to use the yahoo treeView api to manipulate the cftree

http://developer.yahoo.com/yui/docs/YAHOO.widget.TreeView.html


Scott BennettManager Technology

Commented:
I have been playing with it and I can't seem to find a way to simulate clicking on a tree node. the closest I have come is making sure the parent is expanded.
Scott BennettManager Technology

Commented:
Good News!! After hours of tinkering and research because it is just buggin the heck out of me I have figured it out...sort of... for now use my example without any database querying on a separate test page:

make the main layout page like this:
<cfset getcategories = querynew("category_id,Name,ParentID")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","1")>
<cfset querysetcell(getcategories,"Name","Category1")>
<cfset querysetcell(getcategories,"ParentID","0")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","2")>
<cfset querysetcell(getcategories,"Name","Category2")>
<cfset querysetcell(getcategories,"ParentID","1")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","3")>
<cfset querysetcell(getcategories,"Name","Category3")>
<cfset querysetcell(getcategories,"ParentID","1")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","4")>
<cfset querysetcell(getcategories,"Name","Category4")>
<cfset querysetcell(getcategories,"ParentID","0")>
 
<script language="JavaScript">
function catTreeNodeSelection(nodeID){
me= YAHOO.widget.TreeView.getNode("categorytree",nodeID);
me.parent.expand();
me.tree.fireEvent("labelClick", me);
}
</script>
<cfajaximport tags="cftree">
<cflayout type="Border" name="toplevellayout" style="margin:0px;height:400px;">
      <cflayoutarea  position="left" name="treepanel" title="Document Categories" size="250" style="padding-top:3px;" overflow="auto" collapsible="false" splitter="true" minsize="200">
                        <cfform>
                              <cftree name = "categorytree" font = "Arial Narrow" italic="yes" completepath="no" format="html">
                                    <cftreeitem value="0" display="Show All Documents" parent="categorytree" imgopen="folder">
                                   <cfloop query="getcategories"><cftreeitem value="#getcategories.category_id#" display="#getcategories.name#" parent="#getcategories.ParentID#" img="folder" imgopen="folder" expand="no"></cfloop>
                              </cftree>
                        </cfform>
      </cflayoutarea>
      <cflayoutarea  position="center" name="documentwindow" overflow="hidden">
            <cfdiv bind="url:index.cfm?fuseaction=docs.list&display=list&category_id={categorytree.node}"/>
      </cflayoutarea>
</cflayout>

then use this for your index.cfm:

<cfparam name="url.category_id" default="0">
<cfif url.category_id eq ""><cfset url.category_id = 0></cfif>

<cfset getcategories = querynew("category_id,Name,ParentID")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","1")>
<cfset querysetcell(getcategories,"Name","Category1")>
<cfset querysetcell(getcategories,"ParentID","0")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","2")>
<cfset querysetcell(getcategories,"Name","Category2")>
<cfset querysetcell(getcategories,"ParentID","1")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","3")>
<cfset querysetcell(getcategories,"Name","Category3")>
<cfset querysetcell(getcategories,"ParentID","1")>
<cfset queryaddrow(getcategories)>
<cfset querysetcell(getcategories,"category_id","4")>
<cfset querysetcell(getcategories,"Name","Category4")>
<cfset querysetcell(getcategories,"ParentID","0")>
<cfoutput>
<b>Your are viewing Category #url.category_id#</b><br>
<table>
<cfloop query="getcategories">
<cfif getcategories.parentID eq url.category_id>
<tr>
      <td><img src="/images/xpicons/folder_closed_24.png" alt="" width="24" height="24" border="0"></td>
      <td><a href="javascript:catTreeNodeSelection(#getcategories.currentrow+1#)">#getcategories.Name#</a></td>
</tr>
</cfif>
</cfloop>
</table>
</cfoutput>


The main trouble is trying to dynamically figure out which node should be opened instead of relying on my hack of currentrow+1. I have been trying to figure out how to use the YAHOO.widget.TreeView.getNodeByProperty()  method but I keep getting "object does not support that method" errors so hopefull this will work for you.
Manager Technology
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.