dijit.tree how to implement a collapse all functionality using only store?

Question

I have a lazy loading dijit.tree which I want to reuse in many places after its data has been loaded. But if I just replace the store object in the other trees with the one which contains most data, the nodes come all expanded. I want to modify the store so that all the items are collapsed before setting it as a store in the new tree. can you tell me how to achieve this?

Answer 1

You cannot use the store for this, as it does not contain any information of the state of the tree nodes. This 'magic' is performed via TreeNode, see some examples here

The 'perfect solution' would be to figure out which paths you need expanded and then set the path of your tree to traverse into the wanted treenodes.

However, since your lazyloading, you need to check the state - while initializing a tree it should be UNCHECKED. However there is a cookie-functionality inbuilt which probably is kicking in, make sure to create new tree's with { persist:false }

You could also extend your tree, so that it will accept collapseChildren(TreeNode) as follows - and then call tree.set("path", [pathsArray]);

collapseChildren : function(top) {
        var self = this;
        if(!top || !self.model.mayHaveChildren(top.item)) return;
        top.getChildren().forEach(function(n) {
                if(n.item.children) {
                        //dojo.style(n.getParent().containerNode, { overflowY: 'hidden', overflowX: 'hidden'});
                        self._collapseNode(n);
                        self.collapseChildren(n);
                }
        });
},

EDIT:

If the autoExpand flag is passed to the constructor, the Tree is initially shown with all nodes expanded.

You can then call collapseAll() and expandAll() to collapse and expand the Tree, respectively. http://livedocs.dojotoolkit.org/dijit/Tree-examples#id3