Our Blog

Custom icons in cftreeHave 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

Laura

Laura

28 Comments

  1. Joshua Dale

    Joshua Dale

    That's cool... although I don't see it as being useful until they enable the onLoad event... Who would have thought developers need the onLoad event :op
  2. Todd
    Josh - there are plenty of ways to simulate an onload event in flash forms.

    Try google...
  3. Joshua Dale

    Joshua Dale

    Yea, that's true... although I would rather just have the onLoad event :o)
  4. Gaindauz

    Gaindauz

    How to use it ya?
    I try but error message: &quot;Error while calling cfc:Service flashRemotingResponder not found.

  5. Laura
    Gaindauz,
    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.
  6. Philippe Maegerman
    One thing that I like in flash tree is to open nodes when clicking on them, not only when clicking the diclosure icon.
    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));
       }
  7. Philippe Maegerman
    Scott's question about iconRenderers has brought my attention, have a look on my blog :)
    http://cfpim.blogspot.com/2005/08/tree-iconfunction-in-cfform-flash.html
  8. Hi Pin,
    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.
  9. Yes, that what I want :)
    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 :)
  10. Philippe Maegerman (Pim)
    I used the cellRenderer property, so I think this will work on any component that has this property, it should work with the grid as well through grid.getColumnAt(index).cellRenderer.
    And yes, I was able to retrieve the treeNode data, in my exemple you can see that childnode 1 &amp; 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 ;))
  11. It's strange, I tried that code grid.getColumnAt(index).cellRenderer but didn't work for me. I think that I missed something.
    I can wait, no problem, I was just curious about that but I don't really need it.
    Thanks
  12. Philippe Maegerman (Pim)
    I just gave it a shot and it works in the grid, the only thing that changes is the way you access the data + I have the method to update the grid cell data on combo change ;)
  13. PaulH
    wow, very cool pim. can we expect a blog on that?
  14. Allan Parsons

    Allan Parsons

    Now that CFMX 7.0.1 is out, is there a way to load the icons when the form loads? Mike Nimer has an outline here (http://www.cfform.com/invoke.cfm?objectid=9C3FD7A7-4E22-1671-59DEFE8CF642A852&amp;method=full) but I can't seem to get it to work with this CFTREE example.
  15. Jeremy

    Jeremy

    I'm missing something. I d/l'ed the source and ran on our server and the page won't render. The code works ok if I comment out lines 19,33-37, 47-52, essentially removing all the icon code. Of course all it does now then is remote fill. Any ideas on what I might be missing? I'm having the same trouble with the same lines in my own code I've adapted from this example.
  16. Laura
    Jeremy,
    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 &lt;cfinput&gt; accordingly.
  17. Jeremy

    Jeremy

    ah ha, fell victim to the ole images/images gag when I copied files over into my testbed. That did the trick, thanks!
  18. Jeremy

    Jeremy

    Investigating some of the other posts here, I see what appears to be questions about rendering page content inside the tree, is that true? The links are no longer good unfortunately, so I can't see what folks were talking about. If on open, I could essentially have iframe like functionality, or the ability to provide a cfformgroup or something, as the content to be shown, boy would that be slick. Conversely, if that can't be done, I need to on click of a leaf, repopulate a tab navigator with the info for that leaf (assuming some binding needs to happen). Extra credit for a solution that does not require a save button on the tabs prior to total page submission =)
  19. tj
    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 after it has been clicked on even though it is still selected?
  20. tj
    Sorry that post should have read:
    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?
  21. Rob C.
    Is there a way to change the icon of a sepcified node when the form loads?

    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.
  22. Robert

    Robert

    I Love the CFTree icons but i seem not to be able to get my href to work. How can i make href or my tree nodes link to cfm files or action pages

    thanx in advance
  23. James
    Does anyone know how to show the selected node in a tree on a pre-populated form. I have the custom icons working fine and I don't need remoting in my case.

    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.
  24. John
    Can you change the icons without using flash remoting? I'm building a cftree populated with simple data from a SQL query. I tried your code, but couldn't get anything to render. Any advice?
  25. ddidci
    Hi, i am making the sample, and it populates ok but with one problem. The node which don't have kids are populated with one empty "kid" with no text. Do u know how to solve this problem?
    Thank you!
  26. ddidci
    Hi, always when i ask for help and i find the solution right after :S
    Sorry for the spam :)