YUI Treeview example

Hi guys,

I'm looking for a complete working example for treeview i.e HTML that I can paste in and it will work. I don't need an extensive demo - but so far when I follow the instructions, I don't seem to get anything like what I should be getting...

Please only post links if it points to a full example that actually works and is up to date (2.7.0)

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Sample Yahoo TreeView</title>

<style type="text/css">
body {

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/treeview/treeview-min.js"></script>

<!--begin custom header content for this example-->
    #treeDiv1 {background: #ffffff; padding:1em;}
<!--end custom header content for this example-->


<body class=" yui-skin-sam">

<h1>Default TreeView</h1>

<div id="treeDiv1"></div>

<script type="text/javascript">

//global variable to allow console inspection of tree:
var tree;

//anonymous function wraps the remainder of the logic:
(function() {

      //function to initialize the tree:
    function treeInit() {
      //Function  creates the tree and
      //builds between 3 and 7 children of the root node:
    function buildRandomTextNodeTree() {
            //instantiate the tree:
        tree = new YAHOO.widget.TreeView("treeDiv1");

        // Add the Nodes
        var tmpNode = new YAHOO.widget.TextNode("TreeNode 1", tree.getRoot(), false);
        tmpNode = new YAHOO.widget.TextNode("TreeNode 1 SubTree", tmpNode, false);
        tmpNode = new YAHOO.widget.TextNode("Leaf TreeNode 1 SubTree  ", tmpNode, false);
        var tmpNode = new YAHOO.widget.TextNode("TreeNode 2", tree.getRoot(), false);

       // Expand and collapse happen prior to the actual expand/collapse,
       // and can be used to cancel the operation
       tree.subscribe("expand", function(node) {
              YAHOO.log(node.index + " was expanded", "info", "example");
              // return false; // return false to cancel the expand

       tree.subscribe("collapse", function(node) {
              YAHOO.log(node.index + " was collapsed", "info", "example");

       // Trees with TextNodes will fire an event for when the label is clicked:
       tree.subscribe("labelClick", function(node) {
              YAHOO.log(node.index + " label was clicked", "info", "example");

            //The tree is not created in the DOM until this method is called:

      //function builds 10 children for the node you pass in:
    function buildLargeBranch(node) {
        if (node.depth < 10) {
            YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
            for ( var i = 0; i < 10; i++ ) {
                new YAHOO.widget.TextNode(node.label + "-" + (i+1), node, false);

      //Add an onDOMReady handler to build the tree when the document is ready




Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PMembreyAuthor Commented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.