Monday, July 5, 2010

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.

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here.
    Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India .
    or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry.
    HTML5 CSS3 Javascript Online Training from India

    ReplyDelete