dijit.Tree not collapsing when reloaded

Question

I have implemented a dijit tree with checkboxes as per the implementation provided on http://jsfiddle.net/5QcFY/14/ and that is working perfectly fine. I am displaying the tree on dialogue box. There are "categories" as parent nodes and "types" as the children nodes. Initially all the parents nodes are displayed collapsed. Once user selects options from children nodes from tree and closes the dialogue box, the selected items are getting passed to the further processing logic.

Below is my implementation:

typeTreeHandle = new dijit.Tree({
                        store: dataStore,
                        id: "docTree",
                        showRoot: false,
                        autoExpand: false,
                        _createTreeNode: function(args) {

                            var tnode = new dijit._TreeNode(args);
                            tnode.labelNode.innerHTML = args.label;

                            //As parent nodes don't need checkboxes
                            if (!args.isExpandable)
                            {
                                var cb = new dijit.form.CheckBox();
                                cb.set('checked', false);
                                cb.placeAt(tnode.labelNode, "first");

                                //To store reference of checkbox object to destroy afterwards.
                                checkBoxArr.push(cb);

                                dojo.connect(cb, "onChange", function() {
                                    var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
                                    dojo.publish("/checkbox/clicked", [{
                                        "checkbox": this,
                                        "item": treeNode.item}]);
                                });
                            }

                            return tnode;
                        }
                    }, "myTree");

Now the issue is: when the user again open the dialog box, the previously expanded categories are still shown expanded. Because of which the loading of elements of tree gets slower. Even if I close the browser window and open again, I can still see the categories previously expanded. I tried destroying the references of the objects created for the checkboxes, but still the problem continues.

Any pointer related to this issue would be really appreciated.

score 2 · Accepted Answer · answered Oct 09 '14 at 09:49

The persist property is what you are looking for, it seems:

Enables/disables use of cookies for state saving.

By default, a Tree will remember which branches were opened/closed. To use this feature you must specify an id for the Tree. To disable the feature, set the “persist” parameter to false.

http://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html#persistence

Somewhat confusingly, the API docs have the following to say about the autoExpand property (which I see you've tried already):

Fully expand the tree on load. Overrides persist.

It appears this is only true for autoExpand: true. Using persist: true (which is the default) will override autoExpand: false too, as you have seen.

http://jsfiddle.net/5QcFY/336/

dijit.Tree not collapsing when reloaded

1 Answers1