Forums

Posting in these forums is disabled. These forums will be available for archive purposes. Please join the new forums at the links below:

  • yui-support - replaces the `YUI 3.x` and `YUI 3 Gallery` forums.
    We have created the following discussion categories within this group to aid discoverability for these most-used topics:
    • Charts for YUI Charts support.
    • DataTable for YUI DataTable support.
    • Gallery for YUI Gallery support, including support for published Gallery components as well as the Gallery process in general.
    • Tools for support of YUI’s suite of developer tools such as selleck, shifter, grover, yogi, etc.
    • Everything Else for questions that don’t fit one of the categories above, we’ve got you covered here.
  • yui-deprecated - replaces the `YUI 2.x` forum and the forums of other deprecated products (`YUI Doc`, `Builder`, `YUI PHP Loader`, etc.).
  [ 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
  • Offline
  • Profile
Tags:
  • checkbox
  • highlight
  • on-demand
  • examples
  • highlight
  • node
  • treeview

Checkboxes in treeview controller highlighted on demand

Post 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>
 

  [ 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