42: A neat javascript tree using css and xhtml

I recently got an email about this post 42: A neat javascript tree using css and xhtml from Andrew Collington from the University of Sussex asking if we had got the checkboxes to work in the tree. The answer is yes and you can find the source code inside the VisibleResults project on Sourceforge Basically we use this Velocity; template

  <div class="lft">
    <div class="frm">
      <div class="head">
        <h5>Contact Type:</h5>
        <a href="javascript: contactTypeTree.openAll();">open all</a> 
        | <a href="javascript: contactTypeTree.closeAll();">close all</a>
      </div>

      <div class="body">
        <div class="dtree">

          <script type="text/javascript">
            <!--
            contactTypeTree = new dTree('contactTypeTree');

            contactTypeTree.add(0,-1,'Contact Types');
            #foreach ($o in ${View.ContactTypes})
              contactTypeTree.add(${o.getValue("ContactTypeId")},${o.getValue("ParentId")},'
              <input type="radio" name="ContactTypeId" value="${o.getValue("ContactTypeId")}" 
             #if (${View.getValue("ContactTypeId")} == ${o.getValue("ContactTypeId")}) checked  
             #end >${o.getValue("Name")}');
            #end

            document.write(contactTypeTree);

            #if(!${View.getValue("ContactTypeId")})

              setRadioGroupCheckFirstItem(document.ContactForm.ContactTypeId);
            #end
            //-->
          </script>

        </div>
      </div>
    </div>
  </div>

With an appropriate context generating this html

  <div class="lft">
    <div class="frm">

      <div class="head">
        <h5>Contact Type:</h5>
        <a href="javascript: contactTypeTree.openAll();">open all</a> | <a href="javascript: contactTypeTree.closeAll();">close all</a>
      </div>

      <div class="body">
        <div class="dtree">

          <script type="text/javascript">
            <!--
            contactTypeTree = new dTree('contactTypeTree');

            contactTypeTree.add(0,-1,'Contact Types');
            contactTypeTree.add(105,104,'<input type="radio" name="ContactTypeId" value="105"  >1. New');
            contactTypeTree.add(109,101,'<input type="radio" name="ContactTypeId" value="109"  >1. Phone');
            contactTypeTree.add(113,104,'<input type="radio" name="ContactTypeId" value="113"  >1.1 New Web');
            contactTypeTree.add(106,104,'<input type="radio" name="ContactTypeId" value="106"  >2. Active');
            contactTypeTree.add(110,101,'<input type="radio" name="ContactTypeId" value="110"  >2. Email');
            contactTypeTree.add(107,104,'<input type="radio" name="ContactTypeId" value="107"  >3. Major');
            contactTypeTree.add(111,101,'<input type="radio" name="ContactTypeId" value="111"  >3. Other');
            contactTypeTree.add(108,104,'<input type="radio" name="ContactTypeId" value="108"  >9. Lapsed');
            contactTypeTree.add(104,0,'<input type="radio" name="ContactTypeId" value="104"  >Customers');
            contactTypeTree.add(101,0,'<input type="radio" name="ContactTypeId" value="101"  >Enquiry');
            contactTypeTree.add(1,0,'<input type="radio" name="ContactTypeId" value="1"  >Transfer');

            document.write(contactTypeTree);

            setRadioGroupCheckFirstItem(document.ContactForm.ContactTypeId);
                            //-->
          </script>


        </div>
      </div>
    </div>
  </div>

Hope this helps.