0 Replies Latest reply on Oct 7, 2010 7:46 AM by Jeremy Nix

    rich:tree animated expand/collapse image

    Jeremy Nix Newbie

      Has anyone added functionality (or know how to enable existing functionality) to rich:tree in order to make the expand/collapse events change the the icon to some sort of animated gif?  I currently have several tree's that are backed by either webservice or database calls, made when the getChildrenMap() method is first called.  These calls can take several seconds depending on whats involved.  It would be nice if I could exchange the open/closed icons for an animated spinner icon while the event is being processed.  I've used the a4j:status in a few different areas, but have found that it doesn't play nice with tree's when dragging is enabled and the processNodeSelection is enabled (if you click and drag quickly, the a4j:status dialog appears, stopping the drag event).

       

      If anyone has implemented this functionality, I'd be interested in seeing it.  If not, is this functionality worth adding to the rich:tree component?

       

      -- Update: 2010-10-07

      I decided to implement the feature myself.  For my purposes, it works pretty good.  The solution has not been battle tested as of yet, so if you notice issues either let me know, or feel free to download the edited source and hack my hack.

       

      2 other noteworthy changes that I made to be aware of:

      a) I did modify one other thing that was not necessary, but is something I "thought" would improve processing time (haven't noticed a difference).  As opposed to generating the expand/collapse images in realtime, I reference ones that were already created and included in the ui jar.

      b) I changed the css and image for the default draggable node icon area (the one with the arrows pointing left and right).  A few of my users were getting confused about where the dropzone was because of the fact that they were not paying attention to the change in the icon.  To help them out, I changed the background color of that icon to be yellow so that green means good, yellow means no drop zone, and red means bad drop zone.