Custom CFTree icons
25 comments Posted by: Laura
Have you ever wondered if it was possible to change the folder icons in the Flash version of cftree? The answer is yes, with a little of workaround.
This example will show you how to change the opened/closed folder icon, the leaf icon, the icon of a specific node, and the default triangles that open and close nodes. Because we need to set the default values before the data is loaded, we cannot change the icons of an already loaded cftee, unless we change each of the nodes one by one.
Because of that, I will show it when it loads with data coming from Flash Remoting, so that I have the opportunity to change the icons before the tree gets its data.
We first need to define our icons:
<cfinput type="Image" name="folder" src="images/folder.png" visible="false" height="0" width="0">
<cfinput type="Image" name="folder_open" src="images/folder_open.png" visible="false" height="0" width="0">
<cfinput type="Image" name="folder_home" src="images/folder_home.png" visible="false" height="0" width="0">
<cfinput type="Image" name="doc" src="images/font_type1.png" visible="false" height="0" width="0">
<cfinput type="Image" name="arrow" src="images/forward.png" visible="false" height="0" width="0">
<cfinput type="Image" name="arrowDown" src="images/arrowDown.png" visible="false" height="0" width="0">
A tree:
<cftree name="categories"><!--- an empty tree ---></cftree>
and then, on the onclick of a button, we set the default icons:
categories.setStyle("folderOpenIcon",folder_open.icon);
categories.setStyle("folderClosedIcon",folder.icon);
categories.setStyle("defaultLeafIcon",doc.icon);
categories.setStyle("disclosureOpenIcon", arrowDown.icon);
categories.setStyle("disclosureClosedIcon", arrow.icon);
That would change all the icons and arrows with our custom icons. If we want to change the icon of a specific node, we need to wait for the data to load. Therefore, if we get the data as described in CFTree populated with Flash remoting and XML, we would do the following right after setting the dataProvider of the tree:
categories.setIcon(categories.getTreeNodeAt(0),
_root.folder_home.icon,_root.folder_home.icon);
In this case, we are getting the root (index 0), but we could get any other node of the tree.
A live example
Download the source
25 Comments so far
Write yoursTheres a challenge for ya's ;)
Try google...
I try but error message: "Error while calling cfc:Service flashRemotingResponder not found.
you must have some misconfiguration of Flash remoting or you don't have the file included in the download, flashRemotingResponder.cfc. Also, try the example in the root of your website just in case it is a problem with the path.
To add on the change event:
if(event.target.getIsBranch(event.target.selectedNode)){
event.target.setIsOpen(event.target.selectedNode, !event.target.getIsOpen(event.target.selectedNode));
}
http://cfpim.blogspot.com/2005/08/tree-iconfunction-in-cfform-flash.html
In your example you are changing the icon not the whole cell right?
For example can you put a dropDown in the cell? I think that is what Scott is talking about.
http://cfpim.coffeeflower.com/treeCellRenderer/
Are you able to access the data once is populated?
Next question is,does this also work on a grid or a List?
That is what I was trying to do but I was playing with the cellRendered property instead of iconfunction and I wonder if your method will work. All extend from List so technically should work (maybe not the grid) .
Nice work :)
And yes, I was able to retrieve the treeNode data, in my exemple you can see that childnode 1 & 2 have a different selected item ;))
I will add this to my blog, but can't do it right now, if you can't wait I will send you the source code ;))
I can wait, no problem, I was just curious about that but I don't really need it.
Thanks
that would happen if the compiler cannot find the images. Make sure you have them in the images folder or change the path in the src attribute of the <cfinput> accordingly.
I could be mistaken, and please correct me if I am, but it appears that selectNode only returns a value when you click on the node and NOT after it has been clicked on even though it is still selected?
I can setStyles when the form loads but I can't seem to figure out how to setIcon. I basically want custom root node icons set when a user first enters the site.
thanx in advance
On a form I pre-populate with data (read from db) and display back to the user, I want to show which node of the tree they selected when submitted. How can I do this?
It should be as simple as setting a cfselect as "selected" or a checkbox as "checked". I cannot find any reference to this anywhere.