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?
Pravin AsarConnect With a Mentor Principal 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



PMembreyAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.