Checkboxes in treeview controller highlighted on demand

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Mihai

Username: b75mihai2011
Joined: Tue Jun 14, 2011 3:47 am
Posts: 1

Tags:

Checkboxes in treeview controller highlighted on demand

Posted: Tue Jun 14, 2011 4:23 am

+0-

Hi,

I am trying to create a treeview that loads its content on-demand and uses checkboxes for highlighting purposes based on some node properties that are read from the DB i.e. some nodes can be highlighted, while others are not. I used the examples on the website. Everything works fine up to the checkbox highlight.

In the callback I create the nodes loaded on demand and then try to set the higlightState to 1 for the ones who fulfill a certain property. It does not work. I cannot see the checkboxes selected

Can you please have a look at the code and help me in this issue?

Thank you.

Cheers
Mihai

Code:

<html> 
<head> 
 
 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Dynamically Loading Node Data with Checkbox Highlighting and Icons</title> 
 
<style type="text/css"> 

body {
   margin:0;
   padding:0;
}
</style> 
 
<link rel="stylesheet" type="text/css" href="../yui/build/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../yui/build/treeview/assets/skins/sam/treeview.css" /> 
<script type="text/javascript" src="../yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="../yui/build/connection/connection-min.js"></script> 
<script type="text/javascript" src="../yui/build/treeview/treeview-min.js"></script> 

<style> 
   #treeDiv1 {background: #fff; margin-top:1em; padding:1em; min-height:7em;}
    
   .ygtvcheck0 { background: url(../yui/examples/treeview/assets/img/check/check0.gif) 0 0 no-repeat; width:16px; height:20px; float:left; cursor:pointer; }
   .ygtvcheck1 { background: url(../yui/examples/treeview/assets/img/check/check1.gif) 0 0 no-repeat; width:16px; height:20px; float:left; cursor:pointer; }
   .ygtvcheck2 { background: url(../yui/examples/treeview/assets/img/check/check2.gif) 0 0 no-repeat; width:16px; height:20px; float:left; cursor:pointer; }
    
   .ygtv-edit-TaskNode  {   width: 190px;}
   .ygtv-edit-TaskNode .ygtvcancel, .ygtv-edit-TextNode .ygtvok  {   border:none;}
   .ygtv-edit-TaskNode .ygtv-button-container { float: right;}
   .ygtv-edit-TaskNode .ygtv-input  input{   width: 140px;}
   .whitebg {
      background-color:white;
   }   
      
   #treewrapper {background: #fff; position:relative;}
      #treeDiv1 {position:relative; width:250px; background: #fff; padding:1em;}
       .icon-ppt { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 0px no-repeat; }
       .icon-dmg { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 -36px no-repeat; }
       .icon-prv { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 -72px no-repeat; }
       .icon-gen { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 -108px no-repeat; }
       .icon-doc { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 -144px no-repeat; }
       .icon-jar { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 -180px no-repeat; }
       .icon-zip { display:block; height: 22px; padding-left: 20px; background: transparent url(../yui/examples/treeview/assets/img/icons.png) 0 -216px no-repeat; }
       .htmlnodelabel { margin-left: 20px; }
       
</style> 
 
</head> 
 
<body class="yui-skin-sam"> 
 
 
<h1>Dynamically Loading Node Data</h1> 

 
<div id="treewrapper"> 
   <div id="treeDiv1" class="whitebg ygtv-checkbox"></div> 
</div>

<button id="logHilit">Log selected</button> 

<script type="text/javascript"> 


(function() {
 
    var tree;
 
    function loadNodeData(node, fnLoadComplete)  {
       
        var nodeLabel = encodeURI(node.label);
 
        //prepare URL for XHR request:
        var sUrl = "http://localhost:9080/gui/servlet/SelectServlet?query=" + nodeLabel;
 
        //prepare our callback object
        var callback = {
 
            //if our XHR call is successful, we want to make use
            //of the returned data and create child nodes.
            success: function(oResponse) {

                var oResults = eval("(" + oResponse.responseText + ")");
               
                var query   = oResults.query;
                var results = query && query.results;
                var rows    = results && results.Row;
                var tempNode, myNodeData;
 
                if (YAHOO.lang.isArray(rows)) {
                    for (var i = 0, len = rows.length; i < len; i++) {

                  // node properties
                        myNodeData = { 
                           label:             rows[i].label,
                           myNodeId:          rows[i].dbId,
                           isLeaf:            rows[i].isLeaf,
                           myNodeActiveState: rows[i].active,
                           propagateHighlightUp: false,
                           propagateHighlightDown: true
                        };
                        
                        tempNode = new YAHOO.widget.TextNode(myNodeData, node, false);
                      
                       if ( myNodeData.myNodeActiveState ){
                           tempNode.labelStyle = "icon-doc";
                           
                       }else {
                          tempNode.labelStyle = "icon-ppt";
                      }
                    }
                }
                
            var allChildren = node.children;
            var output = '';
            
            for (var i = 0, len = allChildren.length; i < len; i++) {
               if (allChildren[i].data.myNodeActiveState == true){
                  allChildren[i].highlightState = 1;
               }
            }
            
                // set for the highlighting propagation after the new node is loaded
            tree.subscribe('clickEvent',tree.onEventToggleHighlight);
                oResponse.argument.fnLoadComplete();
            },
 
          
            failure: function(oResponse) {
                oResponse.argument.fnLoadComplete();
            },
          
            argument: {
                "node": node,
                "fnLoadComplete": fnLoadComplete
            },
          
            timeout: 7000
        };
 
        YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
    }
 
    function init() {
       //create a new tree:
       tree = new YAHOO.widget.TreeView("treeDiv1");
 
       //turn dynamic loading on for entire tree:
       tree.setDynamicLoad(loadNodeData);
 
       //get root node for tree:
       var root = tree.getRoot();
 
       //add child nodes for tree; our top level nodes are bands
       var firstNodes = ["node 1","node 2","node 3","node 4","node 5"];
 
       for (var i=0, j=firstNodes.length; i<j; i++) {
            var tempNode = new YAHOO.widget.TextNode(firstNodes[i], root, false);
       }
       
       // set for the highlighting propagation
       tree.setNodesProperty('propagateHighlightUp',false);
      tree.setNodesProperty('propagateHighlightDown',true);
      tree.subscribe('clickEvent',tree.onEventToggleHighlight);
      
      YAHOO.util.Event.on('logHilit','click',function() {
         var hiLit = tree.getNodesByProperty('highlightState',1);
         if (YAHOO.lang.isNull(hiLit)) { 
            alert("None selected");
         } else {
            var labels = [];
            for (var i = 0; i < hiLit.length; i++) {
               labels.push(hiLit[i].label + " - " + hiLit[i].data.myNodeId);
            }
            alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
         }
      });
 
       tree.draw();
    }
 
     YAHOO.util.Event.onDOMReady(init);
}());
 
 
</script> 
 
</body> 
</html> 
 

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum