richui:treeView, expand and select

I extended the richui:treeView component a little bit as I wanted to be able to have a little control about extending and selecting nodes depending on what was happening on the rest of my page. I therefore followed the instructions on:

http://6by9.wordpress.com/2009/06/18/62/

Additionally to the extended attribute, I also added the selected attribute to the code:

builder.yieldUnescaped "    function createNode(text, id, icon, pnode, expand, select){\n"
builder.yieldUnescaped "        var n = new YAHOO.widget.TextNode(text, pnode, false);\n"
builder.yieldUnescaped "        n.labelStyle=icon;\n"
builder.yieldUnescaped " if(expand == \"true\"){\n"
builder.yieldUnescaped "  n.expanded = true;\n"
builder.yieldUnescaped " }\n"
builder.yieldUnescaped " if(select == \"true\"){\n"
builder.yieldUnescaped "  n.selected = true;\n"
builder.yieldUnescaped " }\n"

and a few lines later this one had to be modified twice:

builder.yieldUnescaped "    createNode(\"" + it.@name + "\", \"" + it?.@id + "\", \"" + it.@icon + "\", $parent, \"" + it.@expanded + "\", \"" + it.@selected + "\");\n"

Afterwards I was able to set the expanded and the selected property during XML generation as node properties. The expanded attribute is immediately accepted by the YUI widget, but selected is not. I found out that you have to look for the selected property yourself and then use the focus method to apply your selection to the actual node:

var selectedNode = YAHOO.widget.TreeView.getTree('tree').getNodeByProperty('selected',true);
if (selectedNode){
 selectedNode.focus();
}

With this, I was able to create the YUI treeView with nodes expanded and selected as I wanted.

RichUI TreeView onLabelClick does not work with current YUI

Running into this problem again and again, I decided to finally write down what one has to change in order to make the onLabelClick work again:

The root of the problem is that in the current YUI the name of the action has changed. This is why you have to open the TreeViewRenderer.groovy in the src folder of the RichUI Plugin.

There you have to look for line 36 and switch "labelClick" with "clickEvent". Voilà.

Just a remark: If you want to access the id of the node late - please don't ask why - access node.node.additionalId in contrary to node.id or node.additionalId. Further change that line 37 accordingly.

changing the style of yui treeview

In my project I make use of the YUI-TreeView widget. The CSS files of YUI are - let's say overwhelming. I found a nice description of how to find the correct style classes with Firebug. Here is an example where the developers explain how to obtain a folder style tree view.

I really just wanted to perform a small little change: The focus bg color of the selected tree nodes. This is what you have to override in your CSS:

.ygtvfocus{background-color:#B4CCFF;}