Re-format tree nodes onSelect

[BCottle]

In my tree, I want all the nodes to show a summary by default.

When a node is selected, I want it to be re-formatted to show all its details.

When a new node is selected, I want only the new selection to show its details, and the previous selection to go back to a summary.

I have formatter(), onSelect, and onBeforeSelect() functions defined, but can't figure out how to handle "de-selecting" and refreshing display.

What would be especially nice is a "refresh" or "reformat" method that acts upon the whole tree without reloading data.

[stworthy]

You can call 'update' method to update a tree node with new data.

Code:

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('update', {
		target: node.target,
		text: 'new text'
	});
}

[BCottle]

That's what I'm doing now, but it is flawed for two reasons:
1) it winds up overlaying any nodes below it (and the effect seems to be cumulative, so it can become a big black blob after clicking a few nodes)
2) it has to be done on all the nodes in order to make sure each one is re-drawn, especially the previously selected node

A third thing that is worth mentioning:
3) I don't actually want to change the text, as the formatter takes care of deciding what to display. I get around this by reassigning the old text just to give update() something to do.

So is there something that will re-draw the whole tree, but not reload the data? It should preserve any selections and other user changes, just re-call the formatter.

[BCottle]

I also have tried this:

Code:

onSelect           : function (node) {
  // update all nodes
  $("#prereqTree .tree-node").each(function (i, el) {
    console.log("element", i, el);
    $("#prereqTree").tree('update', {
      target: el,
      iconCls: "" // null-op to force re-formatting
    });
  });
}

But it made no difference. I still get the overlap as the lower down items over-write the upper ones.

[stworthy]

The code below does force the special node to be rendered. The displaying effect depends on how you define the 'formatter' function.

Code:

    $("#prereqTree").tree('update', {
      target: el,
      iconCls: "" 
    });

If you want to refresh the whole tree, you can call 'loadData' method to re-load the existing data bound on the tree.

Code:

var t = $('#prereqTree');
var root = t.tree('getRoot');
t.tree('loadData', [root]);

[BCottle]

As you know, I am already calling that update method. And I see it works, in that the formatter is called for that node and it draws all the details of the selected node. The problem is that the rest of the tree does not adapt to the multi-line node, instead it overwrites the display. [See attached screenshot]

As you can see from my previous comment, I also tried refreshing every node in the tree individually. That also called the formatter for every node, but the overlay problem still exists.

I tried your code to reload data, but...
It calls the formatter for each node, but it has already wiped out the selected node so nothing gets displayed but summary information.

I want to keep my selections, and the formatter() knows to handle selected nodes differently.

In what way should I define the formatter() so it can draw the node without overlap?

[stworthy]

Does your tree node display multiline text? If so, there is better simple way to achieve this functionality.

[BCottle]

Yes it does, and what is that way, please?

[stworthy]

Please try this code to display the multiline text for the leaf nodes.

Code:

<style type="text/css">
	.tree-node{
		height: auto;
	}
	.tree-title{
		height: auto;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#tt').tree({
			formatter: function(node){
				if (node.children && node.children.length){
					return node.text;
				}
				var s = '<span>'+node.text+'</span>';
				s += '<br>detail information';
				return s;
			}
		})
	})
</script>

[BCottle]

So all I was missing was the CSS styles! Nice.

Is there a way to get the dotted lines between nodes to cover the new multi-line distance? Right now I get the first line with dots, and the rest is blank down to the next node line.

[stworthy]

No, so please set the 'lines' property to false. Here is the simple example shows how to display multiline text for leaf nodes.

http://code.reloado.com/eciyiv/edit#preview