Solved

How to make a dynamic tree control.

Posted on 2004-08-28
7
714 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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Export JSON response data to Excel in IE9 3 76
best way to search/remove a file from an EAR file 3 109
excpetion with multiple catch 11 116
tomcat startup error 5 65
If you thought ransomware was bad, think again! Doxware has the potential to be even more damaging.
February 24, 2017 — On February 23, Travis Ormandy, a vulnerability researcher at Google, reported on Twitter (https://twitter.com/taviso/status/834900838837411840) that massive stores of data have been leaked by CloudFlare, a company that provide…
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

803 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