Solved

How to make a dynamic tree control.

Posted on 2004-08-28
7
722 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Compliance and data security require steps be taken to prevent unauthorized users from copying data.  Here's one method to prevent data theft via USB drives (and writable optical media).
Microsoft Office 365 is a subscriptions based service which includes services like Exchange Online and Skype for business Online. These services integrate with Microsoft's online version of Active Directory called Azure Active Directory.
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

626 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