treeview preserve folder status expanded / collapsed

Hello, I am making some tests with YUI treeview to integrate it in one of my Moodle pages.

I noticed that the examples (http://developer.yahoo.com/yui/examples/treeview/folder_style.html) do not preserve the folders expanded / collapsed status when you navigate to another page and back again. It seems that the whole treeview is rebuilt from scratch whenever the page is shown/rendered again.

Is there a possibility to keep the whole tree as it is, i.e. with all folders expanded and/or collapsed when the user navigates forth and back from one web-page to another?

In my case the tree would appear on every page the user visits, displaying the same tree (as it represents the site-navigation), and hence it would prove a very poor user experience if the user had to start over expanding all folders again on every new page. Normally the tree should represent exactly the path where the user navigated to, but without recalculating it on the server, because recalculating wich folders should be expanded, would mean to keep track of every mouse-click the users make in the treeview and send this information back to the server. It would certainly be more efficient if the next page containing the same treeview code would not trigger a new rendering of the whole tree in its default state, but would render it exactly as it was on the previous page.

If you want to see a working example, please visit https://moodle.fhnw.ch, expand any folders in the siteNavigation block. Navigate onto any other web-page and back using your browser's back-button. The library I am using there is HTML-TreeMenu but I would like to switch over to YUI treeview, but without the users losing look and feel of the actual implementation.

Thanks for any hints, Rosario

6 Replies
  • Maybe I have found a hint in the

    Class YAHOO.util.History
    The History class provides the ability to use the back/forward navigation buttons in a DHTML application. It also allows a DHTML application to be bookmarked in a specific state.

    I will report back. Rosario
  • NO, without help from a YUI expert, I have no chance to solve that problem.
  • As I discovered, it could be done with the YUI Cookie library. But on a site with 3'500 web pages deeply nested in 900 folders the cookie will not be able to hold all the states. On the other hand, as we record only the states of the folders the users click on to expand them (assuming all others being collapsed), we have a chance of maintaining the treeview across multiple web-pages.

    A lean server-side alternative would be to expand only all folders down the path to the web-page the users are just visiting which would behave as the treeview-Menu http://developer.yahoo.com/yui/examples/tr...menu_style.html where only one root-node can be expanded.

    Anyway I wonder if it could not be done simply by not loading / re-rendering the treeview when you navigate from page to page, as the client browser should already have cached that js-code.

    As I read in the YUI best-practices for speeding up web-pages, loading js-files will allow the client browsers to cache them.

    I am going to test this now and report back.
  • First: I got a working prototype with Cookies, have a look here:


    You can navigate or reload the page at your will, all the folders will preserve their state, even elapsed ones in a collapsed branch.

    Download the page to use it as example for your own purposes.

    Second: simply including the javascript code as file does not do the trick. The global variable tree is initialized/recreated at every page load. Here is my prototype. Again, feel free to download it and download also the renderTree.js file from the same location:


    So I would still appreciate any hint on how to achieve the same result without cookies. Oooooh Heavens, I am just realizing that the original HTML-TreeMenu library does it using cookies as well... So this might be the only way to go.
  • Hi Rosario,

    You should visit the YUI forum to post your question -- all the YUI experts are there: http://yuilibrary.com/forum/index.php

    I be you'll find an answer faster...

    best, Havi @ydn
  • >>all the YUI experts are there: http://yuilibrary.com/forum/index.php

    Thanks a lot, and what is this one for?

Recent Posts

in General Discussion at YDN