Solved

How to make a dynamic tree control.

Posted on 2004-08-28
7
710 Views
Last Modified: 2011-10-03
Hi all,
I want to make a dynamic checkbox tree control . The requirement is basically to show the files on my file system with a feature to check and uncheck the checkboxes depending whether i want to include these file to create a zip file.
Now the problem is that i am able to create a tree control but the parent-child relationship between the nodes has really not been possible. That is once i click on the parent item all it's children should appear clicked and in the same way once i click a child it's corresponding parent should appear checked and if all child nodes are unchecked the parent node should be unchecked if previously checked.I have tried my hands on few DHTML stuff but it really doesnot work in Netscape, and moreover i need a dynamic tree which is not possible using the example below.

Please see the link:
http://www.screenbooks.net/jorr/js/checktree.htm
0
Comment
Question by:CodingExperts
  • 4
  • 3
7 Comments
 
LVL 21

Accepted Solution

by:
MogalManic earned 50 total points
ID: 11926514
It certainly is possible using the example you supplied.  The hard part is recursing your directory tree.  Here are the steps I would follow:
  1) Break the example into separate files
     a) CSS file for the style sheet
     b) .JS file for the checktree library
     c) .JSP file for the dynamic version of the web page
  2) The JSP file might be something like this:
<!-- This page is HEAVILY documented in LEO. For documentation for this page, see the LEO source file.
       This page was created from a LEO source file named "widgets.leo".
-->
<html>
<head>
<title>CheckboxTree Demo</title>
<link type='text/css' href='treeStyle.css' media='screen/>
<script type='text/javascript' href='checktree.js'>/**/</script>
<script type='text/javascript>
  // a function which serves as an associative array to hold the data
  function items() {
  }
  var myItems = new items();
  var myItemsArray = new Array();
  <%=TreeParser.generateTreeData(request.getAttribute("StartDirectory", "myItems"))%>
  var myCheckboxTree = new clsCheckboxTree(myItems, "CheckboxTree", true, false);

  function window_onload() {

   // draw the checkboxtree
   myCheckboxTree.draw();

   // set the focus to the first checkbox, bc otherwise it will
   // get set to one of the submit buttons, which looks ugly
   CheckboxTreeItems(0).focus();

  }
  function submitMe () {

   // loop thru the checkboxes and set
   var r = 0;
   var ccode = "";
   var item;
   var data = "";
   for (r = 0; r < CheckboxTreeItems.length; r++) {
 
     // get next checkbox
     item = CheckboxTreeItems(r);
 
     // if the ccode attribute is blank, it means the checkbox isn't a leaf
     // node checkbox, i.e. it doesn't have any data value
     if (item.ccode == "") continue;
 
     // we're getting the values from the checkboxes. This implemention has a "cvalue" and a "ccode"
     // edit the following line to make the data that is actually submitted be whatever you want.
     if (item.checked) {
         data += item.ccode;
     }
   }

 alert("The following data will be submitted: \n" + data);
 mainForm.data.value = data;
// mainForm.submit();

}
</script>
</head>
<body
  bgcolor="gainsboro"
  topmargin="2"
  leftmargin="2"
  marginheight="2"
  marginwidth="2"
  onload="window_onload()"
>

<script>
  var CheckboxTreeItemsCollapseFlag;
</script>
<br>



<div
  id="CheckboxTree"
  style="position:absolute; top: 0; width:316; height:440 ; overflow-y:scroll">
</div>

<div style="position:absolute; width:316; top:460; left:100">
<form name="mainForm" action="wherever.jsp" method="post" >
   <input type=hidden name=data>
   <input type=hidden name=action>
   <button onclick="submitMe()" style="width:100">Submit</button>
</form>
</div>

</body>
</html>


Another possiblity is to use a custom taglib instead of javascript:
http://www.common-controls.com/cc2/treecontrol/sample201/producttreeBrowse.do?btnSave=clicked
0
 
LVL 21

Expert Comment

by:MogalManic
ID: 12110505
Why the C grade?

Did you end up using one of my solutions?


Did you have any further questions?
0
 
LVL 6

Author Comment

by:CodingExperts
ID: 12111131
HI MogalManic,
It was a good effort but my problem still persists. I don't want to go to the server side to do the processing.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 21

Expert Comment

by:MogalManic
ID: 12111650
When you say
>show the files on my file system
you mean the browsers file system.  If so, try these links:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21110329.html

If your problem is with zipping the files, I have no idea.

If your problem is setting up the parent/child relationships, then send me some code snippits on how you are implementing this and maybe I can help!?!?
0
 
LVL 6

Author Comment

by:CodingExperts
ID: 12119906
Okay MogalManic,

I am able to browse the file system on the server. My page shows a tree view of the files in any desired location on the server with all the node having a checkbox in front of it which basically does nothing but allows you to select a particular file to be included in the zip with all the other selected file of the tree view.

I want to have a parent-child relationship with the checkboxesin the tree view. If i select all files/folders within a folder then that parent folder should be automatically checked, similarly if i check the parent folder all the files/folder within the file in the treeview should be checked. Wee I can do this if I submit my page on every click which is what i am trying to avoid.

Thanks Buddy for your extended help. :-)
CodingExpert

Hey I closed the question lest i forget it ,and since u were the only one who answered i thought to award the points to u.Please don't mind if I awarded you a C Grade.
0
 
LVL 21

Expert Comment

by:MogalManic
ID: 12121169
This should be doable in Javascript.  Just put an onclick event on each checkbox.  When all of the children are selected, select the parent in the Javascript.  As for the parent node selecting the children, this SHOULD be already happening.  At least it does in the demo application you supplied.  If you are having trouble with the Javascript, post a new question in the JavaScript forum (I suppose it is doable in VBScript too).

As for the points, I don't care(It's only points, not like I'm getting paid), but if I answered the question better, maybe the moderator can raise the grade.
0
 
LVL 6

Author Comment

by:CodingExperts
ID: 12121638
Hi MogalManic

The problem is that since the checkboxes are dynamically generated so are their names.
  chk1
       -- chk1_1
       -- chk1_2
   chk2
       -- chk2_1
           -- chk2_1_1
           -- chk2_1_2
                --chk2_1_2_1
and so on so how can i write a javascript to establish parent child relationship !!!!
 
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In this article, I will show you HOW TO: Create your first Windows Virtual Machine on a VMware vSphere Hypervisor 6.5 (ESXi 6.5) Host Server, the Windows OS we will install is Windows Server 2016.
In  today’s increasingly digital world, managed service providers (MSPs) fight for their customers’ attention, looking for ways to make them stay and purchase more services. One way to encourage that behavior is to develop a dependable brand of prod…
This video discusses moving either the default database or any database to a new volume.
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now