Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

YUI 2 treeview port (gallery-treeview) on cdn

Last Updated: 06/3/10

+ 1 -

Adam Moore

YUI Contributor

See 4 more by this user.

Created: 11/5/09
Last CDN Push: 11/19/09
Build Tag: gallery-2009.11.19-20
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.

A direct port of the YUI2 treeview control. It doesn't support date editing or animation, but most everything else works fine. I did as little as possible to get this to work in YUI3 as a proof of concept, and much of the code has not been converted to YUI3 style. The threshold for committing this was based on functionality, not elegance. This is not the tree control that will eventually be part of YUI3.

This control requires the port gallery module written by Dav Glass. The skin file may need to be included inline. Examples can be found in my github repo under sandbox/apm

Code Sample

<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <title>YUI 3 gallery treeview checkbox test</title>
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/assets/skins/sam/gallery-treeview.css" />
    <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-debug.js" type="text/javascript"></script> 
</head>
<body class="yui-skin-sam">
    <h3>Tree with highlight propagation and 'checkbox' skin</h3>
    <div id="treeDiv1"  class="whitebg ygtv-checkbox"></div>
    <button id="logHilit">Log selected</button>
 
    <hr/>
    <h3>Tree with single node highlighting and simple skin</h3>
 
    <div id="treeDiv2" class="whitebg ygtv-highlight"></div>
    <script type="text/javascript">
        YUI({
            modules: {
                'gallery-port': {
                    fullpath: 'http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-port/gallery-port-min.js',
                    requires: ['base','node']
                },
                'gallery-treeview': {
                    fullpath: 'http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/gallery-treeview-min.js',
                    requires: ['node','gallery-port']
                 }
            },
 
            filter: 'debug',
 
            logExclude: {
                attribute: true,
                event: true,
                base: true,
                deprecated: true,
                Selector: true
            }
 
        }).use('gallery-treeview', function(Y) {
            //Creating the local YAHOO copy
            var YAHOO = Y.Port(),
                Lang = YAHOO.lang,
                Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event,
                Gallery = Y.apm; 
 
            //global variable to allow console inspection of tree:
            var tree1, tree2;
 
            var makeBranch = function (parent,label) {
                label = label || '';
                var n = Math.random() * (6 - (label.length || 0));
                for (var i = 0;i < n;i++) {
                    var tmpNode = new Gallery.TextNode('label' + label + '-' + i, parent, Math.random() > .5);
                    makeBranch(tmpNode,label + '-' + i);
                }
            }
 
            var treeInit = function() {
                tree1 = new Gallery.TreeView("treeDiv1");
                makeBranch(tree1.getRoot());
                tree1.setNodesProperty('propagateHighlightUp',true);
                tree1.setNodesProperty('propagateHighlightDown',true);
                tree1.on('clickEvent',tree1.onEventToggleHighlight);		
                tree1.render();
 
                Y.on('click', function() {
                    var hiLit = tree1.getNodesByProperty('highlightState',1);
                    if (Lang.isNull(hiLit)) { 
                        Y.log("None selected");
                    } else {
                        var labels = [];
                        for (var i = 0; i < hiLit.length; i++) {
                            labels.push(hiLit[i].label);
                        }
                        Y.log("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
                    }
                }, '#logHilit');
 
                tree2 = new Gallery.TreeView("treeDiv2");
                makeBranch(tree2.getRoot());
                tree2.singleNodeHighlight = true;
                tree2.on('clickEvent',tree2.onEventToggleHighlight);		
                tree2.render();
 
            };
 
            //Add an onDOMReady handler to build the tree when the document is ready
            Y.on('domready', treeInit);
 
        });
    </script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <title>YUI 3 gallery treeview checkbox test</title>
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/assets/skins/sam/gallery-treeview.css" />
    <script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-debug.js" type="text/javascript"></script> 
</head>
<body class="yui-skin-sam">
    <h3>Tree with highlight propagation and 'checkbox' skin</h3>
    <div id="treeDiv1"  class="whitebg ygtv-checkbox"></div>
    <button id="logHilit">Log selected</button>

<hr/>
    <h3>Tree with single node highlighting and simple skin</h3>

<div id="treeDiv2" class="whitebg ygtv-highlight"></div>
    <script type="text/javascript">
        YUI({
            modules: {
                'gallery-port': {
                    fullpath: 'http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-port/gallery-port-min.js',
                    requires: ['base','node']
                },
                'gallery-treeview': {
                    fullpath: 'http://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/gallery-treeview-min.js',
                    requires: ['node','gallery-port']
                 }
            },

filter: 'debug',

logExclude: {
                attribute: true,
                event: true,
                base: true,
                deprecated: true,
                Selector: true
            }

}).use('gallery-treeview', function(Y) {
            //Creating the local YAHOO copy
            var YAHOO = Y.Port(),
                Lang = YAHOO.lang,
                Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event,
                Gallery = Y.apm;

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

var makeBranch = function (parent,label) {
                label = label || '';
                var n = Math.random() * (6 - (label.length || 0));
                for (var i = 0;i < n;i++) {
                    var tmpNode = new Gallery.TextNode('label' + label + '-' + i, parent, Math.random() > .5);
                    makeBranch(tmpNode,label + '-' + i);
                }
            }

var treeInit = function() {
                tree1 = new Gallery.TreeView("treeDiv1");
                makeBranch(tree1.getRoot());
                tree1.setNodesProperty('propagateHighlightUp',true);
                tree1.setNodesProperty('propagateHighlightDown',true);
                tree1.on('clickEvent',tree1.onEventToggleHighlight);		
                tree1.render();

Y.on('click', function() {
                    var hiLit = tree1.getNodesByProperty('highlightState',1);
                    if (Lang.isNull(hiLit)) { 
                        Y.log("None selected");
                    } else {
                        var labels = [];
                        for (var i = 0; i < hiLit.length; i++) {
                            labels.push(hiLit[i].label);
                        }
                        Y.log("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
                    }
                }, '#logHilit');

tree2 = new Gallery.TreeView("treeDiv2");
                makeBranch(tree2.getRoot());
                tree2.singleNodeHighlight = true;
                tree2.on('clickEvent',tree2.onEventToggleHighlight);		
                tree2.render();
                
            };

//Add an onDOMReady handler to build the tree when the document is ready
            Y.on('domready', treeInit);

});
    </script>
</body>
</html>

Forum Posts

Subject	Author	Date
Treeview Folders ?	John Bercik	05/3/10
Re: Treeview Folders ?	John Bercik	05/7/10
json object as TextNode	Tiyi Alum	07/15/10