Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Re: Adding Context menu to Tree

Expand Messages
  • Eric Miraglia
    chandhrudu, I m sorry -- I may be misunderstanding your question. I posted to this thread a response to zmische about the Implementation Gallery...I did not
    Message 1 of 11 , Dec 15, 2006
    View Source
    • 0 Attachment
      chandhrudu,

      I'm sorry -- I may be misunderstanding your question.  I posted to this thread a response to zmische about the Implementation Gallery...I did not post about a code sample for integrating ContextMenu with TreeView.  

      However, to answer the latter question...

      <script>
      (function(){

      var init = function() {
      //build a TreeView instance with one node:
      var tree = new YAHOO.widget.TreeView("treediv");
      var root = tree.getRoot();
      var node1 = new YAHOO.widget.TextNode("Label for first node.", root);
      tree.draw();
      //get the element that we want to attach
      //a context menu to; in this case, we'll
      //attach it to the element encompassing
      //the first (only) node in the tree:
      var myContextEl = node1.getEl();
      //create a ContextMenu with the TreeView's
      //node as its trigger:
      var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", { trigger: myContextEl } );
      oContextMenu.addItem("cut");
      oContextMenu.addItem("copy");
      oContextMenu.addItem("paste");
      oContextMenu.render(document.body);
      }
      YAHOO.util.Event.on(window, 'load', init);

      })();
      </script>
      <body>
      <div id="treediv"></div>
      </body>
      </html>

      This will create a one-node TreeView instance which, when you right-click on the node, pops up a context menu.

      Regards,
      Eric

      ______________________________________________
      Eric Miraglia
      Yahoo! Presentation Platform Engineering



      On Dec 15, 2006, at 3:01 AM, chandhrudu wrote:

      --- In ydn-javascript@yahoogroups.com, "chandhrudu" <chandhrudu@...>
      wrote:
      >
      > Hi Eric,
      Can you please post the code you talked about.

      I think it will be beneficial for every one, if you can post it here
      in the forums, or if you doesn't like that idea , then do mail me at
      this mail id.

      I really need it badly!
      Thanking you in advance

      >
      >
      >
      >
      >
      > Hi! Eric,
      > Thank you for your offer of help!
      >
      > I'd like to have the solution, which ever way you would like to
      > provide me!
      >
      > If you feel like sending me by mail, well I don't mind , and even
      > feel happier to receive your mail.
      >
      > my mail-id is saasira@...
      >
      > Thanking you,
      > samba.
      >
      >
      >
      > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@> wrote:
      > >
      > > zmische,
      > >
      > > Please do share your implementation link -- we have an
      Implementation
      > > Gallery right here in YDN-JavaScript:
      > >
      > > http://tech.groups.yahoo.com/group/ydn-javascript/links/
      > > YUI_Implementations_001149002597/
      > >
      > > Regards,
      > > Eric
      > >
      > > ______________________________________________
      > > Eric Miraglia
      > > Yahoo! Presentation Platform Engineering
      > >
      > >
      > >
      > > On Dec 13, 2006, at 11:27 AM, zmische wrote:
      > >
      > > > I've just finished this in my intranet application - and it's really
      > > > great! $) Users cant even beleave that it's possible! $)
      > > >
      > > > I could share an example, if your like... or send you via mail...
      > > > Or post it here... What do you prefer?
      > > > I think it would be greate to add such case studies to examples
      > > > section of YUI!
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "chandhrudu" <chandhrudu@>
      > > > wrote:
      > > > >
      > > > > Hi! All
      > > > >
      > > > > Can any one tell me how to add a Context menu to YUI Tree Widget.
      > > > >
      > > > > When I tried to add the Context menu widget to the div holding
      > > > the
      > > > > Tree , I'm getting the Context menu for the entire 'DIV' , even
      > > > when
      > > > > there is no Tree nodes to click on.
      > > > >
      > > > > I think adding menu listener to the entire tree does not make
      > > > sense,
      > > > > may be we should attach the menu widget to the Tree Node?
      > > > >
      > > > > Can you please help me how to add Context menu to YUI Tree?
      > > > > Thanking you,
      > > > > Samba
      > > > >
      > > >
      > > >
      > > >
      > >
      >


    • zmische
      That is - my whole tree loading application with context menu on tree nodes! Feel free to use it! $) Dont be afraid of the asp tags - I ought to use ASP
      Message 2 of 11 , Dec 15, 2006
      View Source
      • 0 Attachment
        That is - my whole tree loading application with context menu on tree
        nodes! Feel free to use it! $)
        Dont be afraid of the asp <% %> tags -> I ought to use ASP in
        Intranet! $) I attah Tree Nodes Loading Asp for Clear picture of the
        process of loading Nodes ito the tree... Perhaps you dont need this
        functionality!

        If somebody nows how to improve any functionality - feel free to give
        me comments!

        Thanks to YUI team - this dynamic tree + Menu greatly improve speed
        of application loading and data processing!

        I get nodes Dynamically vai this file:
        ---------Begin File ajx_tree_nodes_xml.asp ---------
        <%@ Language=VBScript %>
        <%Option explicit%>
        <%
        dim ID_Node
        dim Level
        Level = Request.QueryString("Level")
        ID_Node = Request.QueryString("ID_Node")

        Response.ContentType = "text/xml;"
        Response.Write "<?xml version=""1.0"" encoding=""WINDOWS-
        1251""?>"
        Response.write "<Results>"

        set cmdSP = Server.CreateObject("ADODB.Command")
        cmdSP.CommandText = "dbo.sp_TreeLevels"
        cmdSP.CommandType = adCmdStoredProc
        cmdSP.ActiveConnection = DBconn
        Set param =
        cmdSP.CreateParameter("@nLevel",adInteger,adParamInput,, Level)
        cmdSP.Parameters.append param
        Set param =
        cmdSP.CreateParameter("@ID_Node",adNumeric,adParamInput,, ID_Node )
        param.Precision = 10
        cmdSP.Parameters.append param

        on error resume next
        Set rs = cmdSP.Execute
        if ( rs.RecordCount <> 0 ) then
        rs.MoveFirst
        do until rs.eof
        Response.write "<Result Level=""" & Level
        & """ ID_Node=""" & rs(1) & """ NodeName = """ & rs(2) & """ />"
        rs.movenext
        loop
        rs.close
        else
        Response.write "<Error Msg=""No records"" />"
        end if
        Response.write "</Results>"
        %>
        -------- end file ajx_tree_nodes_xml.asp ----------


        ----------- begin tree_ajx.asp ------
        <%@ Language=VBScript %>
        <%Option explicit%>
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
        TR/html4/strict.dtd">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset="windows-
        1251" />
        <!--Yahoo! User Interface Library: http://developer.yahoo.com/yui -->
        <!--Begin YUI CSS infrastructure, including Standard Reset, Standard
        Fonts, and CSS Page Grids -->
        <link href='/yui_lib/css/reset-fonts-grids.css' rel='stylesheet'
        type='text/css'>
        <link href='/yui_lib/css/tree.css' rel='stylesheet' type='text/css'>
        <link href='/yui_lib/css/container.css' rel='stylesheet' type='text/
        css'>
        <link href='/yui_lib/css/menu.css' rel='stylesheet' type='text/css'>
        <link href='/yui_lib/css/logger.css' rel='stylesheet' type='text/css'>
        <!--end YUI CSS infrastructure-->
        <!--begin YUIL Utilities -->
        <script src='/yui_lib/js/yui/utilities.js' type='text/
        javascript'></script>
        <script src='/yui_lib/js/yui/treeview-min.js' type='text/
        javascript'></script>
        <script src='/yui_lib/js/yui/menu-min.js' type='text/
        javascript'></script>
        <script src='/yui_lib/js/yui/logger-min.js' type='text/
        javascript'></script>
        <!--end YUIL Utilities-->

        <script type="text/javascript">
        //var tree, root_tree;
        var Yu = YAHOO.util;
        var YuD = Yu.Dom;
        var YuE = Yu.Event;
        var $ = Yu.Dom.get;
        YAHOO.namespace('example.container');
        YeC = YAHOO.example.container;

        function extMenuEvNodes(p_oLI, p_oMenu) {
        // Find Node_index to get Current Node to
        Refresh
        // I didnt Found how I could Index of The
        TextNode object inside tree to play with...
        // so just grab it's index from TextNode
        element ID -> The Number on the end - is what we need
        var nodeToReset_idx = /
        (\d+)$/.exec(p_oLI.id)[1];
        ylog("nodeToReset_idx:[" + nodeToReset_idx +
        "]");
        var nodeToReset =
        YeC.tree.getNodeByIndex(nodeToReset_idx);
        // Refresh Dynamically loaded Nodes
        YeC.tree.removeChildren(nodeToReset);
        // Auto expand it and load new data
        nodeToReset.expand();
        };

        function menuInit() {
        // Menu Init
        var aMenuItems = [ { text: "Refresh subtree" } ];
        // For 1st level now
        var textNodes =
        YeC.tree.getNodesByProperty("level", 1);
        var Nodes_els_arr = [];
        for ( var i=0; i < textNodes.length; i++ ) {

        Nodes_els_arr.push($(textNodes[i].labelElId));
        };
        ylog("Nodes_els_arr len:[" +
        Nodes_els_arr.length + "]");
        // Create the new context menu
        YeC.oEweContextMenu = new YAHOO.widget.ContextMenu(
        "ewecontextmenu",
        {
        trigger: Nodes_els_arr,
        itemdata: aMenuItems,
        lazyload: true
        }
        );

        function onEweContextMenuClick (p_sType,
        p_aArgs, p_oMenu) {
        var oItem = p_aArgs[1];
        if(oItem) {
        var oLI = this.contextEventTarget; //
        GetListItemFromEventTarget(this.contextEventTarget);
        ylog("onEweContextMenuClick oItem.index:[" +
        oItem.index + "]");
        switch(oItem.index) {
        case 0: // Clone
        extMenuEvNodes(oLI, this); // Action To do on
        Click of The Context menu
        break;
        }
        }
        };
        // Add a "render" event handler to the context menu
        function onContextMenuRender (p_sType,
        p_aArgs, p_oMenu) {
        this.clickEvent.subscribe(onEweContextMenuClick,
        YeC.oEweContextMenu, true);
        };
        // When menu is prepared and rendered
        YeC.oEweContextMenu.renderEvent.subscribe(onContextMenuRender,
        YeC.oEweContextMenu, true);
        };

        // Handler to load 1st level of the Tree -> Init of The Tree
        function successHandler_L1(obj) {
        var Level, ID_Node, NodeName;
        var root_xml =
        obj.responseXML.documentElement;
        var Errors =
        root_xml.getElementsByTagName('Error');
        if ( Errors.length > 0 ) {
        var err_msg =
        Errors[0].attributes.getNamedItem("Msg").value;
        ylog(err_msg);
        return true;
        };

        //create a new tree:
        YeC.tree = new
        YAHOO.widget.TreeView("treeContainer");
        YeC.root_tree = YeC.tree.getRoot();
        // Get tree nodes for The tree
        var Results =
        root_xml.getElementsByTagName('Result');
        for ( i=0; i < Results.length; i++) {
        Level =
        Results[i].attributes.getNamedItem("Level").value;
        ID_Node =
        Results[i].attributes.getNamedItem("ID_Node").value;
        NodeName =
        Results[i].attributes.getNamedItem("NodeName").value;
        var label_obj = {label:
        NodeName, ID_Node: ID_Node, level: 1};
        var tmpNode = new
        YAHOO.widget.TextNode(label_obj, YeC.root_tree, false);
        // loadNodeData_2 function to
        load nodes -> for any Level > 1

        tmpNode.setDynamicLoad(loadNodeData_2, 1);
        // Do Something OnClick event
        tmpNode.onLabelClick =
        onLabelClick;
        }
        YeC.tree.draw();
        // Init Context Menu for The 1st tree
        level
        menuInit();
        };

        //Handler to Load Sublevels from 2nd Level and deeper
        function successHandler_L2(obj) {
        var Level, ID_Node, NodeName;
        var arg = obj.argument;
        var root_xml =
        obj.responseXML.documentElement;
        var Errors =
        root_xml.getElementsByTagName('Error');
        // Errors?
        if ( Errors.length > 0 ) {
        var err_msg =
        Errors[0].attributes.getNamedItem("Msg").value;
        ylog(err_msg);
        arg.fnLoadComplete();
        return true;
        };
        // Get Nodes to add to the tree
        var Results =
        root_xml.getElementsByTagName('Result');
        for ( i=0; i < Results.length; i++) {
        Level =
        Results[i].attributes.getNamedItem("Level").value;
        ID_Node =
        Results[i].attributes.getNamedItem("ID_Node").value;
        NodeName =
        Results[i].attributes.getNamedItem("NodeName").value;
        ylog("node_url:[" + node_url
        + "] level:[" + arg.level + "]");
        var label_obj = {label:
        NodeName, ID_Node: ID_Node, level: arg.level};
        var tmpNode = new
        YAHOO.widget.TextNode(label_obj, arg.node, false);
        // Manually constraint Tree
        Level Depth %)) It can be as deep as you allow!
        if ( arg.level < 4 ) { //
        Depth level -> tree should have only 4 levels!

        tmpNode.setDynamicLoad(loadNodeData_2, 1);
        };
        tmpNode.onLabelClick =
        onLabelClick;
        };
        // SubMenu is loaded -> fire Event!
        arg.fnLoadComplete();
        // Add Context menu for Nodes, that
        have subNodes 1..3 Level
        if ( arg.level < 3 ) {
        // Get nodes for the
        current Level
        var textNodes =
        YeC.tree.getNodesByProperty("level", arg.level);
        // Get Current Array
        of the Triggered Context Menu Elements
        var Nodes_els_arr =
        YeC.oEweContextMenu.cfg.getProperty("trigger");
        ylog("Nodes_els_arr
        len:[" + Nodes_els_arr.length + "]");
        // Add Just added
        nodes for Array of Triggered Elems
        // @TODO: Perhaps
        it's possible to extend Array with Nw Nodes w/o cycle?
        for ( var i=0; i <
        textNodes.length; i++ ) {

        Nodes_els_arr.push($(textNodes[i].labelElId));
        };
        ylog("Nodes_els_arr
        len:[" + Nodes_els_arr.length + "]");
        // Clear Trigger
        Property for Refreshing

        YeC.oEweContextMenu.cfg.setProperty("trigger", null);
        // Add new Array with
        current levels and All upper nodes Also

        YeC.oEweContextMenu.cfg.setProperty("trigger", Nodes_els_arr);
        };
        };

        // Process Click Events...
        onLabelClick = function(oNode) {
        ylog( "Label clicked:[" + oNode.data.label + "]
        custom:[" + oNode.data.ID_Node + "]");
        };


        function failHandler(obj) {
        var arg = obj.argument;
        var msg = "Error:" + obj.statusText;
        // Error, but tree finishes loading -> fire Event!
        arg.fnLoadComplete();
        ylog(msg);
        };

        function loadNodeData_2(node, fnLoadComplete) {
        ylog("loadNodeData_2:[" + node.data.label + "]
        node.data.level:[" + node.data.level + "]" );
        var entryPoint = 'ajx_tree_nodes_xml.asp';
        //var new_level = parseInt(++node.data.level);
        var new_level = parseInt(node.data.level) + 1;
        var queryString = ("?Level=" + new_level +
        "&ID_Node=" + node.data.ID_Node );
        var sUrl = entryPoint + queryString;
        var request = YAHOO.util.Connect.asyncRequest('GET',
        sUrl, { success:successHandler_L2, failure:failHandler,
        timeout:10000, argument: {fnLoadComplete:fnLoadComplete, node:node,
        level:new_level} });
        };

        // Init Tree with 1st level of Data
        YAHOO.example.treeExample = function() {
        function buildTree() {
        var new_level = 1; // Load only first tree
        level
        var entryPoint = 'ajx_tree_nodes_xml.asp';
        var queryString = ("?Level=" + new_level);
        var sUrl = entryPoint + queryString;
        var request =
        YAHOO.util.Connect.asyncRequest('GET', sUrl, {
        success:successHandler_L1, failure:failHandler, timeout:15000,
        argument: {level:new_level} });
        };

        return {
        init: function() {
        var tree_h =
        Yu.Dom.getViewportHeight() - 30;
        Yu.Dom.setStyle("treeContainer",
        "height", tree_h);
        buildTree();
        }
        }
        }();

        var ylog = YAHOO.log;
        function init() {
        if (YAHOO.widget.LogReader) {
        var oLogReader = new
        YAHOO.widget.LogReader(null, {fontSize:"1.1em", newestOnTop:true});
        YAHOO.widget.Logger.enableBrowserConsole();
        }
        };

        YuE.on(window, "load", init);
        YuE.on(window, "load", YAHOO.example.treeExample.init,
        YAHOO.example.treeExample, true);

        </script>
        <style type="text/css">
        .hover, .selected {
        background-color:#343417;
        }
        .ygtvlabel {
        color: black;
        }
        .ygtvlabel:hover {
        color: highlighttext;
        background-color:highlight;
        }

        .tree_style {
        font-size : 1em;
        font-family: "Times", Verdana, Arial, "Microsoft Sans
        Serif";
        background-color: #F8F7F1;
        }

        #treeContainer {
        overflow: auto;
        border: 1px solid grey;
        text-align: left;
        }

        body, #treeContainer, #dlg {
        background-color: #EAE6D0;
        }

        /* Context menu */
        div.yuimenu ul {
        padding:0.5em 0;
        }

        /* Matches focused and selected menu items */

        div.yuimenu li.selected,
        div.yuimenubar li.selected {
        background-color: #EAE6D0;
        }

        div.yuimenu li.selected a.selected,
        div.yuimenubar li.selected a.selected {
        text-decoration:none;
        background-color: #EAE6D0;
        }

        div.yuimenu li.selected a.selected,
        div.yuimenu li.selected em.selected,
        div.yuimenubar li.selected a.selected {
        color: #000; /* white! */
        }

        /* End context menu */
        </style>
        <title>Tree</title>
        </head>
        <body>
        <TABLE style="height:90%; width:100%;">
        <tbody>
        <tr>
        <td>
        <div
        id="treeContainer" class="tree_style"></div>
        </table>
        </body>
        </html>

        ----------- end tree_ajx.asp ---------
      • chandhrudu
        Thankyou very much Eric, I now understood where to add the the context menu; I ll try implementing it min y code, Thanks once again.
        Message 3 of 11 , Dec 16, 2006
        View Source
        • 0 Attachment
          Thankyou very much Eric,
          I now understood where to add the the context menu;
          I'll try implementing it min y code, Thanks once again.


          --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
          >
          > chandhrudu,
          >
          > I'm sorry -- I may be misunderstanding your question. I posted to
          > this thread a response to zmische about the Implementation
          > Gallery...I did not post about a code sample for integrating
          > ContextMenu with TreeView.
          >
          > However, to answer the latter question...
          >
          > <script>
          > (function(){
          >
          > var init = function() {
          >
          > //build a TreeView instance with one node:
          > var tree = new YAHOO.widget.TreeView("treediv");
          > var root = tree.getRoot();
          > var node1 = new YAHOO.widget.TextNode("Label for first node.", root);
          > tree.draw();
          >
          > //get the element that we want to attach
          > //a context menu to; in this case, we'll
          > //attach it to the element encompassing
          > //the first (only) node in the tree:
          > var myContextEl = node1.getEl();
          >
          > //create a ContextMenu with the TreeView's
          > //node as its trigger:
          > var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
          > { trigger: myContextEl } );
          >
          > oContextMenu.addItem("cut");
          > oContextMenu.addItem("copy");
          > oContextMenu.addItem("paste");
          >
          > oContextMenu.render(document.body);
          >
          > }
          >
          > YAHOO.util.Event.on(window, 'load', init);
          >
          > })();
          > </script>
          > <body>
          > <div id="treediv"></div>
          > </body>
          > </html>
          >
          > This will create a one-node TreeView instance which, when you right-
          > click on the node, pops up a context menu.
          >
          > Regards,
          > Eric
          >
          > ______________________________________________
          > Eric Miraglia
          > Yahoo! Presentation Platform Engineering
          >
          >
          >
          > On Dec 15, 2006, at 3:01 AM, chandhrudu wrote:
          >
          > > --- In ydn-javascript@yahoogroups.com, "chandhrudu" <chandhrudu@>
          > > wrote:
          > > >
          > > > Hi Eric,
          > > Can you please post the code you talked about.
          > >
          > > I think it will be beneficial for every one, if you can post it here
          > > in the forums, or if you doesn't like that idea , then do mail me at
          > > this mail id.
          > >
          > > I really need it badly!
          > > Thanking you in advance
          > >
          > > >
          > > >
          > > >
          > > >
          > > >
          > > > Hi! Eric,
          > > > Thank you for your offer of help!
          > > >
          > > > I'd like to have the solution, which ever way you would like to
          > > > provide me!
          > > >
          > > > If you feel like sending me by mail, well I don't mind , and even
          > > > feel happier to receive your mail.
          > > >
          > > > my mail-id is saasira@
          > > >
          > > > Thanking you,
          > > > samba.
          > > >
          > > >
          > > >
          > > > --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@>
          > > wrote:
          > > > >
          > > > > zmische,
          > > > >
          > > > > Please do share your implementation link -- we have an
          > > Implementation
          > > > > Gallery right here in YDN-JavaScript:
          > > > >
          > > > > http://tech.groups.yahoo.com/group/ydn-javascript/links/
          > > > > YUI_Implementations_001149002597/
          > > > >
          > > > > Regards,
          > > > > Eric
          > > > >
          > > > > ______________________________________________
          > > > > Eric Miraglia
          > > > > Yahoo! Presentation Platform Engineering
          > > > >
          > > > >
          > > > >
          > > > > On Dec 13, 2006, at 11:27 AM, zmische wrote:
          > > > >
          > > > > > I've just finished this in my intranet application - and it's
          > > really
          > > > > > great! $) Users cant even beleave that it's possible! $)
          > > > > >
          > > > > > I could share an example, if your like... or send you via
          > > mail...
          > > > > > Or post it here... What do you prefer?
          > > > > > I think it would be greate to add such case studies to examples
          > > > > > section of YUI!
          > > > > >
          > > > > > --- In ydn-javascript@yahoogroups.com, "chandhrudu"
          > > <chandhrudu@>
          > > > > > wrote:
          > > > > > >
          > > > > > > Hi! All
          > > > > > >
          > > > > > > Can any one tell me how to add a Context menu to YUI Tree
          > > Widget.
          > > > > > >
          > > > > > > When I tried to add the Context menu widget to the div holding
          > > > > > the
          > > > > > > Tree , I'm getting the Context menu for the entire 'DIV' ,
          > > even
          > > > > > when
          > > > > > > there is no Tree nodes to click on.
          > > > > > >
          > > > > > > I think adding menu listener to the entire tree does not make
          > > > > > sense,
          > > > > > > may be we should attach the menu widget to the Tree Node?
          > > > > > >
          > > > > > > Can you please help me how to add Context menu to YUI Tree?
          > > > > > > Thanking you,
          > > > > > > Samba
          > > > > > >
          > > > > >
          > > > > >
          > > > > >
          > > > >
          > > >
          > >
          > >
          > >
          >
        • thameem_ansari
          I tried your code with my test html page and i couldn t get the context visible when I click the tree menu item. And moreover is there any clear step by step
          Message 4 of 11 , Jan 25, 2007
          View Source
          • 0 Attachment
            I tried your code with my test html page and i couldn't get the
            context visible when I click the tree menu item. And moreover is there
            any clear step by step guide about how to do this nice feature?

            I am using yui-ext drag and drop tree view from yui-ext.com the svn
            version. It has all the features except context menu.

            Thanks,
            Thameem

            --- In ydn-javascript@yahoogroups.com, "zmische" <zmische@...> wrote:
            >
            > That is - my whole tree loading application with context menu on tree
            > nodes! Feel free to use it! $)
            > Dont be afraid of the asp <% %> tags -> I ought to use ASP in
            > Intranet! $) I attah Tree Nodes Loading Asp for Clear picture of the
            > process of loading Nodes ito the tree... Perhaps you dont need this
            > functionality!
            >
            > If somebody nows how to improve any functionality - feel free to give
            > me comments!
            >
            > Thanks to YUI team - this dynamic tree + Menu greatly improve speed
            > of application loading and data processing!
            >
            > I get nodes Dynamically vai this file:
            > ---------Begin File ajx_tree_nodes_xml.asp ---------
            > <%@ Language=VBScript %>
            > <%Option explicit%>
            > <%
            > dim ID_Node
            > dim Level
            > Level = Request.QueryString("Level")
            > ID_Node = Request.QueryString("ID_Node")
            >
            > Response.ContentType = "text/xml;"
            > Response.Write "<?xml version=""1.0"" encoding=""WINDOWS-
            > 1251""?>"
            > Response.write "<Results>"
            >
            > set cmdSP = Server.CreateObject("ADODB.Command")
            > cmdSP.CommandText = "dbo.sp_TreeLevels"
            > cmdSP.CommandType = adCmdStoredProc
            > cmdSP.ActiveConnection = DBconn
            > Set param =
            > cmdSP.CreateParameter("@nLevel",adInteger,adParamInput,, Level)
            > cmdSP.Parameters.append param
            > Set param =
            > cmdSP.CreateParameter("@ID_Node",adNumeric,adParamInput,, ID_Node )
            > param.Precision = 10
            > cmdSP.Parameters.append param
            >
            > on error resume next
            > Set rs = cmdSP.Execute
            > if ( rs.RecordCount <> 0 ) then
            > rs.MoveFirst
            > do until rs.eof
            > Response.write "<Result Level=""" & Level
            > & """ ID_Node=""" & rs(1) & """ NodeName = """ & rs(2) & """ />"
            > rs.movenext
            > loop
            > rs.close
            > else
            > Response.write "<Error Msg=""No records"" />"
            > end if
            > Response.write "</Results>"
            > %>
            > -------- end file ajx_tree_nodes_xml.asp ----------
            >
            >
            > ----------- begin tree_ajx.asp ------
            > <%@ Language=VBScript %>
            > <%Option explicit%>
            > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
            > TR/html4/strict.dtd">
            > <head>
            > <meta http-equiv="Content-Type" content="text/html; charset="windows-
            > 1251" />
            > <!--Yahoo! User Interface Library: http://developer.yahoo.com/yui -->
            > <!--Begin YUI CSS infrastructure, including Standard Reset, Standard
            > Fonts, and CSS Page Grids -->
            > <link href='/yui_lib/css/reset-fonts-grids.css' rel='stylesheet'
            > type='text/css'>
            > <link href='/yui_lib/css/tree.css' rel='stylesheet' type='text/css'>
            > <link href='/yui_lib/css/container.css' rel='stylesheet' type='text/
            > css'>
            > <link href='/yui_lib/css/menu.css' rel='stylesheet' type='text/css'>
            > <link href='/yui_lib/css/logger.css' rel='stylesheet' type='text/css'>
            > <!--end YUI CSS infrastructure-->
            > <!--begin YUIL Utilities -->
            > <script src='/yui_lib/js/yui/utilities.js' type='text/
            > javascript'></script>
            > <script src='/yui_lib/js/yui/treeview-min.js' type='text/
            > javascript'></script>
            > <script src='/yui_lib/js/yui/menu-min.js' type='text/
            > javascript'></script>
            > <script src='/yui_lib/js/yui/logger-min.js' type='text/
            > javascript'></script>
            > <!--end YUIL Utilities-->
            >
            > <script type="text/javascript">
            > //var tree, root_tree;
            > var Yu = YAHOO.util;
            > var YuD = Yu.Dom;
            > var YuE = Yu.Event;
            > var $ = Yu.Dom.get;
            > YAHOO.namespace('example.container');
            > YeC = YAHOO.example.container;
            >
            > function extMenuEvNodes(p_oLI, p_oMenu) {
            > // Find Node_index to get Current Node to
            > Refresh
            > // I didnt Found how I could Index of The
            > TextNode object inside tree to play with...
            > // so just grab it's index from TextNode
            > element ID -> The Number on the end - is what we need
            > var nodeToReset_idx = /
            > (\d+)$/.exec(p_oLI.id)[1];
            > ylog("nodeToReset_idx:[" + nodeToReset_idx +
            > "]");
            > var nodeToReset =
            > YeC.tree.getNodeByIndex(nodeToReset_idx);
            > // Refresh Dynamically loaded Nodes
            > YeC.tree.removeChildren(nodeToReset);
            > // Auto expand it and load new data
            > nodeToReset.expand();
            > };
            >
            > function menuInit() {
            > // Menu Init
            > var aMenuItems = [ { text: "Refresh subtree" } ];
            > // For 1st level now
            > var textNodes =
            > YeC.tree.getNodesByProperty("level", 1);
            > var Nodes_els_arr = [];
            > for ( var i=0; i < textNodes.length; i++ ) {
            >
            > Nodes_els_arr.push($(textNodes[i].labelElId));
            > };
            > ylog("Nodes_els_arr len:[" +
            > Nodes_els_arr.length + "]");
            > // Create the new context menu
            > YeC.oEweContextMenu = new YAHOO.widget.ContextMenu(
            > "ewecontextmenu",
            > {
            > trigger: Nodes_els_arr,
            > itemdata: aMenuItems,
            > lazyload: true
            > }
            > );
            >
            > function onEweContextMenuClick (p_sType,
            > p_aArgs, p_oMenu) {
            > var oItem = p_aArgs[1];
            > if(oItem) {
            > var oLI = this.contextEventTarget; //
            > GetListItemFromEventTarget(this.contextEventTarget);
            > ylog("onEweContextMenuClick oItem.index:[" +
            > oItem.index + "]");
            > switch(oItem.index) {
            > case 0: // Clone
            > extMenuEvNodes(oLI, this); // Action To do on
            > Click of The Context menu
            > break;
            > }
            > }
            > };
            > // Add a "render" event handler to the context menu
            > function onContextMenuRender (p_sType,
            > p_aArgs, p_oMenu) {
            > this.clickEvent.subscribe(onEweContextMenuClick,
            > YeC.oEweContextMenu, true);
            > };
            > // When menu is prepared and rendered
            > YeC.oEweContextMenu.renderEvent.subscribe(onContextMenuRender,
            > YeC.oEweContextMenu, true);
            > };
            >
            > // Handler to load 1st level of the Tree -> Init of The Tree
            > function successHandler_L1(obj) {
            > var Level, ID_Node, NodeName;
            > var root_xml =
            > obj.responseXML.documentElement;
            > var Errors =
            > root_xml.getElementsByTagName('Error');
            > if ( Errors.length > 0 ) {
            > var err_msg =
            > Errors[0].attributes.getNamedItem("Msg").value;
            > ylog(err_msg);
            > return true;
            > };
            >
            > //create a new tree:
            > YeC.tree = new
            > YAHOO.widget.TreeView("treeContainer");
            > YeC.root_tree = YeC.tree.getRoot();
            > // Get tree nodes for The tree
            > var Results =
            > root_xml.getElementsByTagName('Result');
            > for ( i=0; i < Results.length; i++) {
            > Level =
            > Results[i].attributes.getNamedItem("Level").value;
            > ID_Node =
            > Results[i].attributes.getNamedItem("ID_Node").value;
            > NodeName =
            > Results[i].attributes.getNamedItem("NodeName").value;
            > var label_obj = {label:
            > NodeName, ID_Node: ID_Node, level: 1};
            > var tmpNode = new
            > YAHOO.widget.TextNode(label_obj, YeC.root_tree, false);
            > // loadNodeData_2 function to
            > load nodes -> for any Level > 1
            >
            > tmpNode.setDynamicLoad(loadNodeData_2, 1);
            > // Do Something OnClick event
            > tmpNode.onLabelClick =
            > onLabelClick;
            > }
            > YeC.tree.draw();
            > // Init Context Menu for The 1st tree
            > level
            > menuInit();
            > };
            >
            > //Handler to Load Sublevels from 2nd Level and deeper
            > function successHandler_L2(obj) {
            > var Level, ID_Node, NodeName;
            > var arg = obj.argument;
            > var root_xml =
            > obj.responseXML.documentElement;
            > var Errors =
            > root_xml.getElementsByTagName('Error');
            > // Errors?
            > if ( Errors.length > 0 ) {
            > var err_msg =
            > Errors[0].attributes.getNamedItem("Msg").value;
            > ylog(err_msg);
            > arg.fnLoadComplete();
            > return true;
            > };
            > // Get Nodes to add to the tree
            > var Results =
            > root_xml.getElementsByTagName('Result');
            > for ( i=0; i < Results.length; i++) {
            > Level =
            > Results[i].attributes.getNamedItem("Level").value;
            > ID_Node =
            > Results[i].attributes.getNamedItem("ID_Node").value;
            > NodeName =
            > Results[i].attributes.getNamedItem("NodeName").value;
            > ylog("node_url:[" + node_url
            > + "] level:[" + arg.level + "]");
            > var label_obj = {label:
            > NodeName, ID_Node: ID_Node, level: arg.level};
            > var tmpNode = new
            > YAHOO.widget.TextNode(label_obj, arg.node, false);
            > // Manually constraint Tree
            > Level Depth %)) It can be as deep as you allow!
            > if ( arg.level < 4 ) { //
            > Depth level -> tree should have only 4 levels!
            >
            > tmpNode.setDynamicLoad(loadNodeData_2, 1);
            > };
            > tmpNode.onLabelClick =
            > onLabelClick;
            > };
            > // SubMenu is loaded -> fire Event!
            > arg.fnLoadComplete();
            > // Add Context menu for Nodes, that
            > have subNodes 1..3 Level
            > if ( arg.level < 3 ) {
            > // Get nodes for the
            > current Level
            > var textNodes =
            > YeC.tree.getNodesByProperty("level", arg.level);
            > // Get Current Array
            > of the Triggered Context Menu Elements
            > var Nodes_els_arr =
            > YeC.oEweContextMenu.cfg.getProperty("trigger");
            > ylog("Nodes_els_arr
            > len:[" + Nodes_els_arr.length + "]");
            > // Add Just added
            > nodes for Array of Triggered Elems
            > // @TODO: Perhaps
            > it's possible to extend Array with Nw Nodes w/o cycle?
            > for ( var i=0; i <
            > textNodes.length; i++ ) {
            >
            > Nodes_els_arr.push($(textNodes[i].labelElId));
            > };
            > ylog("Nodes_els_arr
            > len:[" + Nodes_els_arr.length + "]");
            > // Clear Trigger
            > Property for Refreshing
            >
            > YeC.oEweContextMenu.cfg.setProperty("trigger", null);
            > // Add new Array with
            > current levels and All upper nodes Also
            >
            > YeC.oEweContextMenu.cfg.setProperty("trigger", Nodes_els_arr);
            > };
            > };
            >
            > // Process Click Events...
            > onLabelClick = function(oNode) {
            > ylog( "Label clicked:[" + oNode.data.label + "]
            > custom:[" + oNode.data.ID_Node + "]");
            > };
            >
            >
            > function failHandler(obj) {
            > var arg = obj.argument;
            > var msg = "Error:" + obj.statusText;
            > // Error, but tree finishes loading -> fire Event!
            > arg.fnLoadComplete();
            > ylog(msg);
            > };
            >
            > function loadNodeData_2(node, fnLoadComplete) {
            > ylog("loadNodeData_2:[" + node.data.label + "]
            > node.data.level:[" + node.data.level + "]" );
            > var entryPoint = 'ajx_tree_nodes_xml.asp';
            > //var new_level = parseInt(++node.data.level);
            > var new_level = parseInt(node.data.level) + 1;
            > var queryString = ("?Level=" + new_level +
            > "&ID_Node=" + node.data.ID_Node );
            > var sUrl = entryPoint + queryString;
            > var request = YAHOO.util.Connect.asyncRequest('GET',
            > sUrl, { success:successHandler_L2, failure:failHandler,
            > timeout:10000, argument: {fnLoadComplete:fnLoadComplete, node:node,
            > level:new_level} });
            > };
            >
            > // Init Tree with 1st level of Data
            > YAHOO.example.treeExample = function() {
            > function buildTree() {
            > var new_level = 1; // Load only first tree
            > level
            > var entryPoint = 'ajx_tree_nodes_xml.asp';
            > var queryString = ("?Level=" + new_level);
            > var sUrl = entryPoint + queryString;
            > var request =
            > YAHOO.util.Connect.asyncRequest('GET', sUrl, {
            > success:successHandler_L1, failure:failHandler, timeout:15000,
            > argument: {level:new_level} });
            > };
            >
            > return {
            > init: function() {
            > var tree_h =
            > Yu.Dom.getViewportHeight() - 30;
            > Yu.Dom.setStyle("treeContainer",
            > "height", tree_h);
            > buildTree();
            > }
            > }
            > }();
            >
            > var ylog = YAHOO.log;
            > function init() {
            > if (YAHOO.widget.LogReader) {
            > var oLogReader = new
            > YAHOO.widget.LogReader(null, {fontSize:"1.1em", newestOnTop:true});
            > YAHOO.widget.Logger.enableBrowserConsole();
            > }
            > };
            >
            > YuE.on(window, "load", init);
            > YuE.on(window, "load", YAHOO.example.treeExample.init,
            > YAHOO.example.treeExample, true);
            >
            > </script>
            > <style type="text/css">
            > .hover, .selected {
            > background-color:#343417;
            > }
            > .ygtvlabel {
            > color: black;
            > }
            > .ygtvlabel:hover {
            > color: highlighttext;
            > background-color:highlight;
            > }
            >
            > .tree_style {
            > font-size : 1em;
            > font-family: "Times", Verdana, Arial, "Microsoft Sans
            > Serif";
            > background-color: #F8F7F1;
            > }
            >
            > #treeContainer {
            > overflow: auto;
            > border: 1px solid grey;
            > text-align: left;
            > }
            >
            > body, #treeContainer, #dlg {
            > background-color: #EAE6D0;
            > }
            >
            > /* Context menu */
            > div.yuimenu ul {
            > padding:0.5em 0;
            > }
            >
            > /* Matches focused and selected menu items */
            >
            > div.yuimenu li.selected,
            > div.yuimenubar li.selected {
            > background-color: #EAE6D0;
            > }
            >
            > div.yuimenu li.selected a.selected,
            > div.yuimenubar li.selected a.selected {
            > text-decoration:none;
            > background-color: #EAE6D0;
            > }
            >
            > div.yuimenu li.selected a.selected,
            > div.yuimenu li.selected em.selected,
            > div.yuimenubar li.selected a.selected {
            > color: #000; /* white! */
            > }
            >
            > /* End context menu */
            > </style>
            > <title>Tree</title>
            > </head>
            > <body>
            > <TABLE style="height:90%; width:100%;">
            > <tbody>
            > <tr>
            > <td>
            > <div
            > id="treeContainer" class="tree_style"></div>
            > </table>
            > </body>
            > </html>
            >
            > ----------- end tree_ajx.asp ---------
            >
          • thameem_ansari
            I got this working using yui-ext and yui libraries. Please have a look at this post http://www.yui-ext.com/forum/viewtopic.php?p=10134#10134 Thanks, Thameem
            Message 5 of 11 , Jan 29, 2007
            View Source
            • 0 Attachment
              I got this working using yui-ext and yui libraries. Please have a look
              at this post http://www.yui-ext.com/forum/viewtopic.php?p=10134#10134

              Thanks,
              Thameem

              --- In ydn-javascript@yahoogroups.com, "thameem_ansari"
              <thameem_ansari@...> wrote:
              >
              > I tried your code with my test html page and i couldn't get the
              > context visible when I click the tree menu item. And moreover is there
              > any clear step by step guide about how to do this nice feature?
              >
              > I am using yui-ext drag and drop tree view from yui-ext.com the svn
              > version. It has all the features except context menu.
              >
              > Thanks,
              > Thameem
              >
              > --- In ydn-javascript@yahoogroups.com, "zmische" <zmische@> wrote:
              > >
              > > That is - my whole tree loading application with context menu on tree
              > > nodes! Feel free to use it! $)
              > > Dont be afraid of the asp <% %> tags -> I ought to use ASP in
              > > Intranet! $) I attah Tree Nodes Loading Asp for Clear picture of the
              > > process of loading Nodes ito the tree... Perhaps you dont need this
              > > functionality!
              > >
              > > If somebody nows how to improve any functionality - feel free to give
              > > me comments!
              > >
              > > Thanks to YUI team - this dynamic tree + Menu greatly improve speed
              > > of application loading and data processing!
              > >
              > > I get nodes Dynamically vai this file:
              > > ---------Begin File ajx_tree_nodes_xml.asp ---------
              > > <%@ Language=VBScript %>
              > > <%Option explicit%>
              > > <%
              > > dim ID_Node
              > > dim Level
              > > Level = Request.QueryString("Level")
              > > ID_Node = Request.QueryString("ID_Node")
              > >
              > > Response.ContentType = "text/xml;"
              > > Response.Write "<?xml version=""1.0"" encoding=""WINDOWS-
              > > 1251""?>"
              > > Response.write "<Results>"
              > >
              > > set cmdSP = Server.CreateObject("ADODB.Command")
              > > cmdSP.CommandText = "dbo.sp_TreeLevels"
              > > cmdSP.CommandType = adCmdStoredProc
              > > cmdSP.ActiveConnection = DBconn
              > > Set param =
              > > cmdSP.CreateParameter("@nLevel",adInteger,adParamInput,, Level)
              > > cmdSP.Parameters.append param
              > > Set param =
              > > cmdSP.CreateParameter("@ID_Node",adNumeric,adParamInput,, ID_Node )
              > > param.Precision = 10
              > > cmdSP.Parameters.append param
              > >
              > > on error resume next
              > > Set rs = cmdSP.Execute
              > > if ( rs.RecordCount <> 0 ) then
              > > rs.MoveFirst
              > > do until rs.eof
              > > Response.write "<Result Level=""" & Level
              > > & """ ID_Node=""" & rs(1) & """ NodeName = """ & rs(2) & """ />"
              > > rs.movenext
              > > loop
              > > rs.close
              > > else
              > > Response.write "<Error Msg=""No records"" />"
              > > end if
              > > Response.write "</Results>"
              > > %>
              > > -------- end file ajx_tree_nodes_xml.asp ----------
              > >
              > >
              > > ----------- begin tree_ajx.asp ------
              > > <%@ Language=VBScript %>
              > > <%Option explicit%>
              > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
              > > TR/html4/strict.dtd">
              > > <head>
              > > <meta http-equiv="Content-Type" content="text/html; charset="windows-
              > > 1251" />
              > > <!--Yahoo! User Interface Library: http://developer.yahoo.com/yui -->
              > > <!--Begin YUI CSS infrastructure, including Standard Reset, Standard
              > > Fonts, and CSS Page Grids -->
              > > <link href='/yui_lib/css/reset-fonts-grids.css' rel='stylesheet'
              > > type='text/css'>
              > > <link href='/yui_lib/css/tree.css' rel='stylesheet' type='text/css'>
              > > <link href='/yui_lib/css/container.css' rel='stylesheet' type='text/
              > > css'>
              > > <link href='/yui_lib/css/menu.css' rel='stylesheet' type='text/css'>
              > > <link href='/yui_lib/css/logger.css' rel='stylesheet' type='text/css'>
              > > <!--end YUI CSS infrastructure-->
              > > <!--begin YUIL Utilities -->
              > > <script src='/yui_lib/js/yui/utilities.js' type='text/
              > > javascript'></script>
              > > <script src='/yui_lib/js/yui/treeview-min.js' type='text/
              > > javascript'></script>
              > > <script src='/yui_lib/js/yui/menu-min.js' type='text/
              > > javascript'></script>
              > > <script src='/yui_lib/js/yui/logger-min.js' type='text/
              > > javascript'></script>
              > > <!--end YUIL Utilities-->
              > >
              > > <script type="text/javascript">
              > > //var tree, root_tree;
              > > var Yu = YAHOO.util;
              > > var YuD = Yu.Dom;
              > > var YuE = Yu.Event;
              > > var $ = Yu.Dom.get;
              > > YAHOO.namespace('example.container');
              > > YeC = YAHOO.example.container;
              > >
              > > function extMenuEvNodes(p_oLI, p_oMenu) {
              > > // Find Node_index to get Current Node to
              > > Refresh
              > > // I didnt Found how I could Index of The
              > > TextNode object inside tree to play with...
              > > // so just grab it's index from TextNode
              > > element ID -> The Number on the end - is what we need
              > > var nodeToReset_idx = /
              > > (\d+)$/.exec(p_oLI.id)[1];
              > > ylog("nodeToReset_idx:[" + nodeToReset_idx +
              > > "]");
              > > var nodeToReset =
              > > YeC.tree.getNodeByIndex(nodeToReset_idx);
              > > // Refresh Dynamically loaded Nodes
              > > YeC.tree.removeChildren(nodeToReset);
              > > // Auto expand it and load new data
              > > nodeToReset.expand();
              > > };
              > >
              > > function menuInit() {
              > > // Menu Init
              > > var aMenuItems = [ { text: "Refresh subtree" } ];
              > > // For 1st level now
              > > var textNodes =
              > > YeC.tree.getNodesByProperty("level", 1);
              > > var Nodes_els_arr = [];
              > > for ( var i=0; i < textNodes.length; i++ ) {
              > >
              > > Nodes_els_arr.push($(textNodes[i].labelElId));
              > > };
              > > ylog("Nodes_els_arr len:[" +
              > > Nodes_els_arr.length + "]");
              > > // Create the new context menu
              > > YeC.oEweContextMenu = new YAHOO.widget.ContextMenu(
              > > "ewecontextmenu",
              > > {
              > > trigger: Nodes_els_arr,
              > > itemdata: aMenuItems,
              > > lazyload: true
              > > }
              > > );
              > >
              > > function onEweContextMenuClick (p_sType,
              > > p_aArgs, p_oMenu) {
              > > var oItem = p_aArgs[1];
              > > if(oItem) {
              > > var oLI = this.contextEventTarget; //
              > > GetListItemFromEventTarget(this.contextEventTarget);
              > > ylog("onEweContextMenuClick oItem.index:[" +
              > > oItem.index + "]");
              > > switch(oItem.index) {
              > > case 0: // Clone
              > > extMenuEvNodes(oLI, this); // Action To do on
              > > Click of The Context menu
              > > break;
              > > }
              > > }
              > > };
              > > // Add a "render" event handler to the context menu
              > > function onContextMenuRender (p_sType,
              > > p_aArgs, p_oMenu) {
              > > this.clickEvent.subscribe(onEweContextMenuClick,
              > > YeC.oEweContextMenu, true);
              > > };
              > > // When menu is prepared and rendered
              > > YeC.oEweContextMenu.renderEvent.subscribe(onContextMenuRender,
              > > YeC.oEweContextMenu, true);
              > > };
              > >
              > > // Handler to load 1st level of the Tree -> Init of The Tree
              > > function successHandler_L1(obj) {
              > > var Level, ID_Node, NodeName;
              > > var root_xml =
              > > obj.responseXML.documentElement;
              > > var Errors =
              > > root_xml.getElementsByTagName('Error');
              > > if ( Errors.length > 0 ) {
              > > var err_msg =
              > > Errors[0].attributes.getNamedItem("Msg").value;
              > > ylog(err_msg);
              > > return true;
              > > };
              > >
              > > //create a new tree:
              > > YeC.tree = new
              > > YAHOO.widget.TreeView("treeContainer");
              > > YeC.root_tree = YeC.tree.getRoot();
              > > // Get tree nodes for The tree
              > > var Results =
              > > root_xml.getElementsByTagName('Result');
              > > for ( i=0; i < Results.length; i++) {
              > > Level =
              > > Results[i].attributes.getNamedItem("Level").value;
              > > ID_Node =
              > > Results[i].attributes.getNamedItem("ID_Node").value;
              > > NodeName =
              > > Results[i].attributes.getNamedItem("NodeName").value;
              > > var label_obj = {label:
              > > NodeName, ID_Node: ID_Node, level: 1};
              > > var tmpNode = new
              > > YAHOO.widget.TextNode(label_obj, YeC.root_tree, false);
              > > // loadNodeData_2 function to
              > > load nodes -> for any Level > 1
              > >
              > > tmpNode.setDynamicLoad(loadNodeData_2, 1);
              > > // Do Something OnClick event
              > > tmpNode.onLabelClick =
              > > onLabelClick;
              > > }
              > > YeC.tree.draw();
              > > // Init Context Menu for The 1st tree
              > > level
              > > menuInit();
              > > };
              > >
              > > //Handler to Load Sublevels from 2nd Level and deeper
              > > function successHandler_L2(obj) {
              > > var Level, ID_Node, NodeName;
              > > var arg = obj.argument;
              > > var root_xml =
              > > obj.responseXML.documentElement;
              > > var Errors =
              > > root_xml.getElementsByTagName('Error');
              > > // Errors?
              > > if ( Errors.length > 0 ) {
              > > var err_msg =
              > > Errors[0].attributes.getNamedItem("Msg").value;
              > > ylog(err_msg);
              > > arg.fnLoadComplete();
              > > return true;
              > > };
              > > // Get Nodes to add to the tree
              > > var Results =
              > > root_xml.getElementsByTagName('Result');
              > > for ( i=0; i < Results.length; i++) {
              > > Level =
              > > Results[i].attributes.getNamedItem("Level").value;
              > > ID_Node =
              > > Results[i].attributes.getNamedItem("ID_Node").value;
              > > NodeName =
              > > Results[i].attributes.getNamedItem("NodeName").value;
              > > ylog("node_url:[" + node_url
              > > + "] level:[" + arg.level + "]");
              > > var label_obj = {label:
              > > NodeName, ID_Node: ID_Node, level: arg.level};
              > > var tmpNode = new
              > > YAHOO.widget.TextNode(label_obj, arg.node, false);
              > > // Manually constraint Tree
              > > Level Depth %)) It can be as deep as you allow!
              > > if ( arg.level < 4 ) { //
              > > Depth level -> tree should have only 4 levels!
              > >
              > > tmpNode.setDynamicLoad(loadNodeData_2, 1);
              > > };
              > > tmpNode.onLabelClick =
              > > onLabelClick;
              > > };
              > > // SubMenu is loaded -> fire Event!
              > > arg.fnLoadComplete();
              > > // Add Context menu for Nodes, that
              > > have subNodes 1..3 Level
              > > if ( arg.level < 3 ) {
              > > // Get nodes for the
              > > current Level
              > > var textNodes =
              > > YeC.tree.getNodesByProperty("level", arg.level);
              > > // Get Current Array
              > > of the Triggered Context Menu Elements
              > > var Nodes_els_arr =
              > > YeC.oEweContextMenu.cfg.getProperty("trigger");
              > > ylog("Nodes_els_arr
              > > len:[" + Nodes_els_arr.length + "]");
              > > // Add Just added
              > > nodes for Array of Triggered Elems
              > > // @TODO: Perhaps
              > > it's possible to extend Array with Nw Nodes w/o cycle?
              > > for ( var i=0; i <
              > > textNodes.length; i++ ) {
              > >
              > > Nodes_els_arr.push($(textNodes[i].labelElId));
              > > };
              > > ylog("Nodes_els_arr
              > > len:[" + Nodes_els_arr.length + "]");
              > > // Clear Trigger
              > > Property for Refreshing
              > >
              > > YeC.oEweContextMenu.cfg.setProperty("trigger", null);
              > > // Add new Array with
              > > current levels and All upper nodes Also
              > >
              > > YeC.oEweContextMenu.cfg.setProperty("trigger", Nodes_els_arr);
              > > };
              > > };
              > >
              > > // Process Click Events...
              > > onLabelClick = function(oNode) {
              > > ylog( "Label clicked:[" + oNode.data.label + "]
              > > custom:[" + oNode.data.ID_Node + "]");
              > > };
              > >
              > >
              > > function failHandler(obj) {
              > > var arg = obj.argument;
              > > var msg = "Error:" + obj.statusText;
              > > // Error, but tree finishes loading -> fire Event!
              > > arg.fnLoadComplete();
              > > ylog(msg);
              > > };
              > >
              > > function loadNodeData_2(node, fnLoadComplete) {
              > > ylog("loadNodeData_2:[" + node.data.label + "]
              > > node.data.level:[" + node.data.level + "]" );
              > > var entryPoint = 'ajx_tree_nodes_xml.asp';
              > > //var new_level = parseInt(++node.data.level);
              > > var new_level = parseInt(node.data.level) + 1;
              > > var queryString = ("?Level=" + new_level +
              > > "&ID_Node=" + node.data.ID_Node );
              > > var sUrl = entryPoint + queryString;
              > > var request = YAHOO.util.Connect.asyncRequest('GET',
              > > sUrl, { success:successHandler_L2, failure:failHandler,
              > > timeout:10000, argument: {fnLoadComplete:fnLoadComplete, node:node,
              > > level:new_level} });
              > > };
              > >
              > > // Init Tree with 1st level of Data
              > > YAHOO.example.treeExample = function() {
              > > function buildTree() {
              > > var new_level = 1; // Load only first tree
              > > level
              > > var entryPoint = 'ajx_tree_nodes_xml.asp';
              > > var queryString = ("?Level=" + new_level);
              > > var sUrl = entryPoint + queryString;
              > > var request =
              > > YAHOO.util.Connect.asyncRequest('GET', sUrl, {
              > > success:successHandler_L1, failure:failHandler, timeout:15000,
              > > argument: {level:new_level} });
              > > };
              > >
              > > return {
              > > init: function() {
              > > var tree_h =
              > > Yu.Dom.getViewportHeight() - 30;
              > > Yu.Dom.setStyle("treeContainer",
              > > "height", tree_h);
              > > buildTree();
              > > }
              > > }
              > > }();
              > >
              > > var ylog = YAHOO.log;
              > > function init() {
              > > if (YAHOO.widget.LogReader) {
              > > var oLogReader = new
              > > YAHOO.widget.LogReader(null, {fontSize:"1.1em", newestOnTop:true});
              > > YAHOO.widget.Logger.enableBrowserConsole();
              > > }
              > > };
              > >
              > > YuE.on(window, "load", init);
              > > YuE.on(window, "load", YAHOO.example.treeExample.init,
              > > YAHOO.example.treeExample, true);
              > >
              > > </script>
              > > <style type="text/css">
              > > .hover, .selected {
              > > background-color:#343417;
              > > }
              > > .ygtvlabel {
              > > color: black;
              > > }
              > > .ygtvlabel:hover {
              > > color: highlighttext;
              > > background-color:highlight;
              > > }
              > >
              > > .tree_style {
              > > font-size : 1em;
              > > font-family: "Times", Verdana, Arial, "Microsoft Sans
              > > Serif";
              > > background-color: #F8F7F1;
              > > }
              > >
              > > #treeContainer {
              > > overflow: auto;
              > > border: 1px solid grey;
              > > text-align: left;
              > > }
              > >
              > > body, #treeContainer, #dlg {
              > > background-color: #EAE6D0;
              > > }
              > >
              > > /* Context menu */
              > > div.yuimenu ul {
              > > padding:0.5em 0;
              > > }
              > >
              > > /* Matches focused and selected menu items */
              > >
              > > div.yuimenu li.selected,
              > > div.yuimenubar li.selected {
              > > background-color: #EAE6D0;
              > > }
              > >
              > > div.yuimenu li.selected a.selected,
              > > div.yuimenubar li.selected a.selected {
              > > text-decoration:none;
              > > background-color: #EAE6D0;
              > > }
              > >
              > > div.yuimenu li.selected a.selected,
              > > div.yuimenu li.selected em.selected,
              > > div.yuimenubar li.selected a.selected {
              > > color: #000; /* white! */
              > > }
              > >
              > > /* End context menu */
              > > </style>
              > > <title>Tree</title>
              > > </head>
              > > <body>
              > > <TABLE style="height:90%; width:100%;">
              > > <tbody>
              > > <tr>
              > > <td>
              > > <div
              > > id="treeContainer" class="tree_style"></div>
              > > </table>
              > > </body>
              > > </html>
              > >
              > > ----------- end tree_ajx.asp ---------
              > >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.