Using YUI 2.x Components :: Re: Tree View from json

If you want to display a branch at a time as they get expanded, using the dynamic load example is a good basis. However, if what you want is to read the data and display it all at once, then it is not, a better example of the alternatives you have on how to load the tree is this one:

http://developer.yahoo.com/yui/examples ... arkup.html

TreeView does not use the JSON utility. TreeView does not consume JSON, it actually doesn't care how it is that you transmit your data either in the dynamic load scenario or the initial load. You can get the data in any way you want it, XML if that is what your server provides, as long as you present it to the TreeView in any of the ways it can't read it.

Just as I was unable to guess how did you want the JSON string displayed, you cannot expect TreeView to figure it out for you. You know your data, you know what TreeView understands, it is up to you to transform it.

Hi

I think I got it. I was able to read the json and generate, well atleast the first level of json and display the same using this,

(function(){

// Creating the tree
function buildTree() {
var tree;
tree = new YAHOO.widget.TreeView("treeDiv1");

tree.setDynamicLoad(loadNodeData);

var root = tree.getRoot();

var tempNode = new YAHOO.widget.TextNode("Payments", root, false);

tree.draw();
}

// Processing new nodes
function loadNodeData(node, fnLoadComplete) {
var path = "";
var leafNode = node;
while (!leafNode.isRoot()) {
path = leafNode.label + "/" + path;
leafNode = leafNode.parent;
}

//var nodelabel = encodeURI(path);

var sUrl = "http://localhost/yui/examples/tree/payment.php";

var callback = {
success: function(oResponse){
var oResults = YAHOO.lang.JSON.parse(oResponse.responseText);

if ((oResults.paymentTypes.paymentType)&&(oResults.paymentTypes.paymentType.length)){
if (YAHOO.lang.isArray(oResults.paymentTypes.paymentType)) {
for (var i=0; i < oResults.paymentTypes.paymentType.length; i++){
var tempNode = new YAHOO.widget.TextNode(oResults.paymentTypes.paymentType[i].name, node, false);
tempNode.isLeaf = !oResults.paymentTypes.paymentType[i].isDir;
}
}
}
oResponse.argument.fnLoadComplete();
},
failure: function(oResponse){
oResponse.argument.fnLoadComplete();
},
argument:{
"node": node,
"fnLoadComplete":fnLoadComplete
},
timeout:5000
}

YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
};

YAHOO.util.Event.onDOMReady(buildTree);
}());


Now I have to get the remaining sub nodes.

Hi

Could someone please explain how to create a treeview widget using json? I have a sample JSON converted from xml using xml2json from IBM. I have tried to read the api's but I am frankly unable to understand how to do this. This is the sample data I am using,

{"sources":{"source":[{"names":"name1","says":"Hello"},{"names":"name2","says":"Hello"},{"names":"name3","says":"Hello"},{"names":"name4","says":"Hello"},{"names":"name5","says":"Hello"},{"names":"name6","says":"Hello"},{"names":"name7","says":"Hello"}]}}

Any help on how to traverse and generate a tree from data like this would be of great help.

Thank You

I am not sure what is it that you want the tree to look like, perhaps something like this?

and so on, which is quite boring, or perhaps you want to use the names. For the above tree, you would have to transform that JSON string into a proper JavaScript object and transform it into this:

[{label: 'sources', children:[{label:'source',children:[{label:'Hello',names:'name1'},{label: .... }]}]

Changing one into the other is just plain JavaScript, nothing YUI can help you with.

Hey,

This might be a simple question but am stumped here. Here is a link to the example I have,

www.capoeiratime.com/cheztree.html

The tree has the first set of text nodes (tempNode1) preloaded from json. When on a particular node to generate the next level text nodes (tempNode2 with tempNode1 as root) all the previous level nodes repeat themselves again. Can this be avoided???

i am trying to follow the dynamic load data example for tree view. As far as transforming it is concerned, i am assuming it is using the JSON utility. Is following that example the correct approach?

For the above sample, all I am aiming for is to display the data as a tree as you have shown. The dynamic load example displays the tree, based of a query sent back to the server. Instead of displaying data based on a query sent back to the server, how do i load the entire tree at once?

In looking at what you are sending to the server for each node expansion, I don't see your sending any arguments to tell the server what is it you are looking for. The server sends the same response, over and over. Somehow you should add some URL arguments to the request from whatever information you have from the node so the server can reply in a different way depending on the node requested.

It is very helpful when you can see the code running, and I appreciate that, otherwise we are always talking in the abstract. If you could strip all those extra new-lines in your source it would be great, because I cannot manage to see more than one line in the screen at a time and it is better to see the code in context.

I am wondering if it is possible to get the following highlighting functionality:

When a user clicks on a plus/minus sign the node expands/contracts. When a user clicks on a node label the node highlights, if it is collapsed it expands, and it makes a JS function call to make an Ajax call. So far this is all the default behavior. However when a user clicks on a node label that is expanded, I want to make the same Ajax call I did before, highlight the node, but NOT collapse it. So as you browse through the tree any nodes you expand stay expanded unless you click on the minus sign. Every time you click on a node it becomes highlighted and makes a call to my Ajax function.

I currently subscribe to the clickEvent, make my Ajax call, and I return false if the node is already expanded to cancel the collapse event. This works perfectly except for the fact that it doesn't highlight the node that has been clicked on when it is already expanded. Can anyone think of a way to accomplish this? I tried to modify the class name of the node directly before I return false as a hack to get it to highlight, but when I do anything other than simply return false after checking node.expanded the node collapses. I even tried editing the class name in the function that makes the Ajax call, but that errored out.

Hopefully that makes sense, I am happy to provide more information if necessary. Thanks in advance for any ideas you have.


Pseudo

Alright so I have been told that we need to add something to this situation...

Now I need to fire the exact same Ajax call when a user clicks on the plus sign in addition to everything else. Initially this seemed easy, just subscribe to the expand event and call the same function I was calling before. I had to tweak things a bit because the expand event passes a node object along while the clickEvent passes oArgs, but w/e, it worked.

Then I noticed that IE was throwing an "Unknown Runtime Error" in what seemed like random cases. After some digging I discovered that when you clicked on an unexpanded label my Ajax call was actually being made twice, causing the error. This was happening because the clickEvent makes the Ajax call, which then fires the expand event which in turn is handled and makes the Ajax call again.

This seems like a bit of a catch 22 situation. I want to handle both expand and label click events, but not make the Ajax call twice. The problem is that clicking on the plus sign fires the expand event, and I also need it to make the Ajax call. By definition the clickEvent will also expand the node, which will trigger the expand event subscription.

My latest thought was to just subscribe to the expandComplete event and make the call there, but then when a user clicks on an expanded label I want to make the Ajax call as well, but not collapse the node. So I could subscribe to the collapse event, but I want clicking on the minus sign to collapse the node but not make the Ajax call....

Sorry for the convoluted nature of this post, but this is the desired behavior (I wish it was otherwise). Is there any way to make this happen? Thanks in advance for any help.

Yeah frankly I think the functionality I am supposed to provide is a bit insane. This is basically what they want:

click on plus - expand node and make ajax call
click on minus - collapse node, no ajax call
click on label (when collapsed) - expand node, make ajax call
click on label (when expanded) - make ajax call, leave node as is

This is NOT the same functionality you would get when browsing a folder tree in windows explorer (for example), and I may just explain that and see if we can forget about the first item on that list. Without the first thing this is fairly trivial, but that one action throws a wrench in the works.

Thanks for your patience and for continuing to respond to this thread.

The clickEvent is not the problem, I can handle that exactly how I want. The concern is dealing with the the click on the plus sign. The only ways to subscribe to this event are via the expand and expandComplete events (as far as I understand it anyway). If I throw an Ajax call on either of those events, then I'm halfway there. Clicking on an unexpanded label or on the plus sign does what I want. The problem is when you click on an expanded label, or a label that is an end node with no expand/collapse abilities. In the former case you can't listen for the collapse event since I don't want to collapse it, I just want to make the Ajax call, and while I could return false to cancel the collapse I want people to be able to collapse a node by clicking on the minus sign. In the latter case you run into problems because you can't just check node.expanded because the end nodes do not have that property.

If you just tell me it is impossible I can bring that back to the project sponsor and be done with it, but I feel like there must be a clever way of accomplishing this.

Hi guys,

Well I'm new with YUI and I'm traying to create a treeview with large number of nodes (loaded from a WS response).

The problem is that when the tree view is loaded if you click on the label area it expand or contract the nodes, the thing is that I'm traying to do this but just when the user click the "+" or "-" icon. Is't possible to do that?

This is the way I create the nodes:

$nodeis an array that has elements and html code.


foreach ($nodes as $node) {
$parent = ($node->parent == 0 ? 'root' : 'node_' . $node->parent);
$nodeJS .= "var node_$node->id = new YAHOO.widget.HTMLNode(" . drupal_to_js($node) . ", $parent, $extend, true);\n";


Regards
Esteban

I find myself at a loss about what stage are you at right now and what exactly is that is not working. You have quite a fine control over everything that happens when clicking everywhere, I told you how all this breaks down. At this point I really don't get it.

It is certainly possible. You just have to listen to clickEvent and return false:

myTreeView.subscribe("clickEvent",function(oArgs)
return false;
});

The logic is that if you plan to do something when a node is clicked, you will be listening to this event so returning false is not a problem, otherwise, if you don't have any plans for click, then the treeview does something for you.


You might also consider sending the raw table of nodes to the client and let it do the looping on it, it will save on pushing all those bits of code built on the fly from the server to the client, plus the time to build it on the server. The TreeView constructor also accepts a reference to a nested series of (un)ordered lists (<ol> or <ul>) from the page.

That doesn't seem hard:

For 1 and 3, you can make the ajax call in response to expandComplete
For 2, you don't need to do anything
For 4, listen to clickEvent, check if node is expanded, if it is, make ajax call and return false