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.).
  [ 4 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic

Benjamin Clot

  • Username: Benjy
  • Joined: Mon Mar 15, 2010 8:12 am
  • Posts: 4
  • Location: Paris, France
  • Offline
  • Profile
Tags:
  • checkbox
  • dom
  • event
  • html
  • treeview

[DEMO] TreeView with HTML checkboxes

Post Posted: Tue Mar 23, 2010 3:41 am
+0-
Hi everyone,

I've recently had to develop a treeview with checkboxes and I wanted to share the code, because some may find it useful. The goal here was to keep the highlight propagation functionality, while using real HTML checkboxes instead of skinned ones, thus facilitating form submission. I've tried many (and I mean it, MANY) variations and here is the one that works as intended: HTML checkboxes, propagation up and down, no bubbling problem (I hate you checkboxes), highlight state 2 considered as checked.

Enough with the talking already, let's get some code!

First off, here are the components you'll need: YAHOO, Dom, Event and, obviously, TreeView (along with it's Sam skin :p).

Then, the HTML part: (http://pastebin.com/K66ULHvT)

Code:
<div id="treeDiv">
   <ul>
      <li><span><input type="checkbox" value="1" id="data_1" name="data[]" /> <label>Fruits, Vegetables</label></span>
         <ul>
            <li><span><input type="checkbox" value="2" id="data_2" name="data[]" /> <label>Vegetables</label></span></li>
         <li><span><input type="checkbox" value="3" id="data_3" name="data[]" /> <label>Fruits</label></span>
            <ul>
               <li><span><input type="checkbox" value="4" id="data_4" name="data[]" /> <label>Apple</label></span></li>
            </ul>
         </li>
         </ul>
      </li>
   </ul>
</div>


Very simple, you can add as many levels as required and, although I didn't test it, I think you can also generate it through JavaScript. I use PHP so my checkbox names are intended to fill an Array. Lastly, I use spans around the inputs and labels (without them, it won't work).

Next, the JavaScript part: (http://pastebin.com/RjRG2RRH)

Code:
//The function that does everything
function fixCheck(e, o) {
   YAHOO.util.Event.stopPropagation(e);
   
   o.toggleHighlight();
   
   for (var i in tree._nodes) {
      if (tree._nodes[i].highlightState) {
         YAHOO.util.Dom.get(tree._nodes[i].contentElId).getElementsByTagName('input')[0].checked = true;
      } else if (!tree._nodes[i].highlightState) {
         YAHOO.util.Dom.get(tree._nodes[i].contentElId).getElementsByTagName('input')[0].checked = false;
      }
   }
}

//Create the TreeView
var tree = new YAHOO.widget.TreeView("treeDiv");
//Set every node to Html type
tree.setNodesProperty('type', 'Html');
//Propagate highlighting (you can enable/disable it as you like, eg. I don't enable highlight down)
tree.setNodesProperty('propagateHighlightDown', false);
tree.setNodesProperty('propagateHighlightUp', true);
//I use this, you might not (expanding everything and killing the collapse/expand events)
tree.expandAll();
tree.subscribe('collapse', function() { return false; });
tree.subscribe('expand', function() { return false; });
//Render :)
tree.render();

//Loop through all the nodes and add an onClick event
for (var i in tree._nodes) {
   YAHOO.util.Event.addListener(YAHOO.util.Dom.getFirstChild(YAHOO.util.Dom.get(tree._nodes[i].contentElId)), "click", fixCheck, tree._nodes[i]);
}


For those of you asking why I'm using this last loop instead of subscribing to the node clickEvent or using eventDelegate: I tried. I had a lot of problems related to event order and IE/FF differences. AFAIK this solution is the only one that works.

Enjoy!

Benjamin Clot

  • Username: Benjy
  • Joined: Mon Mar 15, 2010 8:12 am
  • Posts: 4
  • Location: Paris, France
  • Offline
  • Profile
Tags:
  • treeview
  • demo

Re: [DEMO] TreeView with HTML checkboxes

Post Posted: Mon Mar 29, 2010 12:47 am
+0-
Hi,

I put a fully fonctional demo here: http://pastebin.com/JNgzyiJw

Note: this demo replaces the expand/collapse pics as I disabled these actions.

Benjy

Tecka James

  • Username: tjames
  • Joined: Thu Mar 25, 2010 8:57 pm
  • Posts: 1
  • IRC: T James
  • Offline
  • Profile

Re: [DEMO] TreeView with HTML checkboxes

Post Posted: Mon Mar 29, 2010 3:42 am
+0-
Thanks very much for the Demo.

kevin chippes

  • Username: kevin85
  • Joined: Tue Jun 29, 2010 9:22 am
  • Posts: 2
  • GitHub: kevin85
  • Gists: kevin85
  • IRC: kevin85
  • Offline
  • Profile
Tags:
  • treeview

Re: [DEMO] TreeView with HTML checkboxes

Post Posted: Thu Jul 01, 2010 6:56 pm
+0-
thanks for this demo! really got a lot of ideas and tips!
______________________
one of best search engine optimization web solution
  [ 4 posts ]
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