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.

YU3-Treeview-Datasource-plugin (gallery-yui3treeview-datasource) on cdn

Last Updated: 11/21/10

+ 0 -

Gonzalo Cordero

YUI Developer

See 1 more by this user.

Created: 11/17/10
Last CDN Push: 12/1/10
Build Tag: gallery-2010.12.01-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0 PR1
Free for use.

General Description

Use this plugin whenever you need to defer load your data until the user request it.

Properties

TreeView:

Add the ""loadOnDemand: true"" when creating a tree to request a tree to be loaded on demand.

TreeViewDataSource:

Since it extends "datasource" and "datasource-jsonschema", it inherits all the properties from those two components. In addition you can specify these properties:

source : The source to quote for new data
loadingMsg: String containing the message to display while retrieving the data. It can be either a string or a Y.node
sourceMethod: Any datasource compatible method(IO/GET/Local)

Usage

First Include the module in your page
Plug it to your treeview and specify the Datasource and schema properties:

 

myTreeview.plug(Y.Plugin.TreeviewDatasource,{

            source : "getNodes.php",

            sourceMethod : "io",

            dataSchemaJSON : {

                resultListLocator : "ResultSet.Result"

            }

        });

3. Fire the request:

 

myTreeview.ds.fire("sendRequest",{data: "Optional data goes here, like for example the node that's been clicked"})

Events

Besides all the [http://developer.yahoo.com/yui/3/datasource/ Datasource] events, you can also subscribe/fire to this events:

sendRequest: Triggers the request to the given source.
onDataReturnSuccess: Fired when the new data has been retrieved successfully.
onDataReturnFailure: Fired when an error occurs while retrieving the data.

Tags:
gonzalocordero

In this example, we will load/render all the tree's leafs as the user click on the tree nodes. The PHP script that sits on the server looks like this:

 

<?php

echo '{

    "ResultSet" : {

        "Result" : [

            {"label": "level1-1"},

            {"label": "level1-2"},

            {

                "type" : "TreeView",

                "loadOnDemand" : true,

                "label" : "Another tree"

            }

        ]

    

    } 

}';

?>

Code Sample

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

<ul class='tree' id="mytree">
	<li>
	   <a href="#">label 1-1</a>
	   <ul>
	   </ul>
	</li>
	<li>
	   <a href="#">label 1-2</a>
	   <ul>
	   </ul>
	</li>
	<li>
	   <a href="#">label 1-1</a>
	   <ul>
	   </ul>
	</li>
</ul>
 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-yui3treeview-datasource', function(Y) {
 
 
var treeview = new Y.TreeView({  
                srcNode: '#mytree',
                contentBox: '#mytree',
                boundingBox: '#mytree',
                type : "TreeView"
});
 
treeview.plug(Y.Plugin.TreeviewDatasource,{
            source : "getTree.php",
            sourceMethod : "io",
            loadingMsg : "<span>Loading</span>",
            dataSchemaJSON : {
                resultListLocator : "ResultSet.Result"
            }
});
treeview.render();
 
treeview.on("treeview:click", Y.bind(function (e) {
            if (!e.target.isRoot()) {
                e.stopPropagation();
                treeview.ds.fire("sendRequest",{node:e.target});
            }
        }),this);
 
 
});

<ul class='tree' id="mytree">
	<li>
	   <a href="#">label 1-1</a>
	   <ul>
	   </ul>
	</li>
	<li>
	   <a href="#">label 1-2</a>
	   <ul>
	   </ul>
	</li>
	<li>
	   <a href="#">label 1-1</a>
	   <ul>
	   </ul>
	</li>
</ul>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.12.01-21-32'
}).use('gallery-yui3treeview-datasource', function(Y) {

var treeview = new Y.TreeView({  
                srcNode: '#mytree',
                contentBox: '#mytree',
                boundingBox: '#mytree',
                type : "TreeView"
});

treeview.plug(Y.Plugin.TreeviewDatasource,{
            source : "getTree.php",
            sourceMethod : "io",
            loadingMsg : "<span>Loading</span>",
            dataSchemaJSON : {
                resultListLocator : "ResultSet.Result"
            }
});
treeview.render();

treeview.on("treeview:click", Y.bind(function (e) {
            if (!e.target.isRoot()) {
                e.stopPropagation();
                treeview.ds.fire("sendRequest",{node:e.target});
            }
        }),this);

});

Forum Posts

Subject	Author	Date
Treeview notes	Gonzalo Cordero	11/30/10
Re: Treeview notes	Satyam	12/1/10
Re: Treeview notes	Gonzalo Cordero	12/2/10
Re: Treeview notes	Satyam	12/2/10
Re: Treeview notes	John Coady	12/4/10
Re: Treeview notes	Gonzalo Cordero	12/8/10
Re: Treeview notes	Stjepan Rajko	12/23/10
Re: Treeview notes	Gonzalo Cordero	12/23/10
TreeView type property	Donald Fincher	12/27/10
Re: Treeview notes	Stjepan Rajko	12/27/10