Solved

How to make a dynamic tree control.

Posted on 2004-08-28
7
716 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
servlet concurrency 13 110
using if condition without JSTL 2 112
how to exclude a file using regex 5 122
web application structure 18 101
If you are looking at this article, you have most likely been hit by some version of ransomware and are trying to find out if there is anything you can do, or what way you should react - READ ON!
This article explains the steps required to use the default Photos screensaver to display branding/corporate images
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…

830 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