Expand/Collapse all nodes in a tree control

[mikeallenbrown]

Like the title says.

In a UX I have a tree control that has many nodes. I want to be able to expand/collapse them all with a single button click. Can't seem to find a method for doing this.

[mikeallenbrown]

Re: Expand/Collapse all nodes in a tree control

*bump*

[Nate Mitchell]

Re: Expand/Collapse all nodes in a tree control

I could be wrong Mike, but I'm not sure you will find a method for this.
Here are some thoughts.

Depending on how you create the jSON for your tree, use the expanded node property and re-draw your tree to expand/close the nodes.
For example, let's say your tree has the following static jSON:

[
 {
  "html": "Level1",
  "value": "Level1",
  "expanded": false,
  "children": [
   {
    "html": "Level1A",
    "value": "Level1A",
    "expanded": false,
    "children": [
     {
      "html": "Level1AA",
      "value": "Level1AA",
      "expanded": false
     }
]
   },
   {
    "html": "Level2",
    "value": "Level2",
    "expanded": false,
      "children": [
       {
        "html": "Level2A",
        "value": "Level2A"
       }]
   }
]
 }
]

From your button, call an xbasic function. In that function you can use the tree populate method to re-populate your tree with static jSON.
Use the same static jSON as above for your treeData variable and just make sure to set the expanded property to true (or false).

dim js as c
	js =<<%str%
	var t ={dialog.object}.getControl('tree1');
	t.populate(__treeData__);
	%str%

js =stritran(js, "__treeData__", treeData)

expandTree = js

If you run into problems, let me know and I'll send a working example.

You "may" be able to do all of this with JS, get a pointer to the tree control, stringify the data and replace the expanded property values before populating the tree again.

Another possibility, but a potential rabbit trail, use firebug to access the dom and see if there are any properties of the tree that you can use/modify.
For example, I was able to get a pointer to each node level and expand it with css.
However, this won't affect the css for the font icons that show the open/closed state.

var level1 = $('{dialog.ComponentName}.V.R1.TREE1.CONTROL.0').childNodes;
var level2 = $('{dialog.ComponentName}.V.R1.TREE1.CONTROL.0.0').children;
var level3 = $('{dialog.ComponentName}.V.R1.TREE1.CONTROL.0.0.0').children;

level1[1].style.display = "block";
level2[1].style.display = "block";
level3[1].style.display = "block";

I have worked with the tree control for a couple years and have now moved completely to hierarchical lists for displaying nested data.
Good luck!

[frankbicknell]

Re: Expand/Collapse all nodes in a tree control

I hope this helps. I do a callback to an xbasic function that builds my tree structure and add the extra data pointer nodeToOpen. If you change nodeToOpen from 1 to 0 I think it will open all of the child nodes. In the function I read the extra data then include the javascript string to open the node

code to do the callback

{dialog.object}.ajaxCallback('','','xbLoadTreeData','','_nodeToOpen=1');

code in the xbasic function that reads the nodeToOpen extra data pointer value and then in my case if it does not exist it opens node 1 default.

	
if variable_exists("e._nodeToOpen")
 nodeToOpen = e._nodeToOpen
else
 nodeToOpen = 1
		end if

code from the xbasic fuction that creates the json for the tree stucture, then sends the json to the treeview control as well as opens the node assigned by the nodeToOpen extra data pointer value. The last line in the js string opens the child node but not the grandchild nodes so you may have to include a line for each child and grandchild.

	dim json as c = ""
	json = a5_treeTextToJSON(txt)
	dim js as c = ""
	js = js + "var tObj = {dialog.object}.getControl('cus_tree')"+crlf()
	js = js + "var d = " + json + ";" + crlf()
	js = js + "tObj.populate(d);"
        js = js + "var trNode = ('{dialog.ComponentName}.V.R1.CUS_TREE.CONTROL."+nodeToOpen+"').childNodes;"
        js = js + "trNode[1].style.display = 'block';"
	xbLoadTreeData = js

[mikeallenbrown]

Re: Expand/Collapse all nodes in a tree control

Thank you both. I'm using the "TreeDataGenie". I'll see if I can adapt your suggestions to work for me.

[Nate Mitchell]

Re: Expand/Collapse all nodes in a tree control

That won't be a problem at all.
You can keep the tree data type as TreeDataGenie.
From the geenie, just click on the show JSON data link, use that JSON in your xbasic function to pass into the populate method.