• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

Data Tree

I want to know with what product I can build a data tree like the one MSDN has on a WebPage, if is there a code example for it....
  • 4
  • 4
1 Solution
Michel PlungjanIT ExpertCommented:
Do you mean an outliner? Something that expands when clicked
like in windows explorer

+ item1
+ item2
- expanded item3
  + subitem3.1
    subitem3.2, no sub here...
  + subitem3.3

If that is the case, I have a couple

You will need to use either an ActiveX Control or a Java Control there is nothing intristic with HTML that will allow you to do it.
juanryahooAuthor Commented:
Yes mplungjan... that's what I'm looking for... Can I use it with ASP ? ? ? Can I see the outliner with Netscape and Internet Explorer? ? ?
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Michel PlungjanIT ExpertCommented:
Reject Jagar's incomplete and wrong answer, and I will post a JavaScript outliner that works with IE3.0 and up and NS2.02 and up. No activeX and no Java so compatible with 16 bit browsers too.

If you wish to use ASP to generate it, no problem.

juanryahooAuthor Commented:
Michel PlungjanIT ExpertCommented:
If you have problems cutting and pasting the code below, give me you email address and I will send it.

<TITLE>Site map</TITLE>
<!-- // Hide
This outliner is copyright 1997-1998 Michel Hamre Plungjan
Feel free to use it, but please tell me if you do.
I expect a link to my site in return.
I will probably be available for comment through sitemap@plungjan.demon.nl
Note: I have tried to be consistent with quotes in this source:
   single quotes around JavaScript strings and
   double quotes around HTML attributes.
Usage: Only modify the code before the *************************
h=location.href;(p=h.lastIndexOf('/'))>0?homedir=h.substring(0,p+1):homedir=''; // do not modify
// Colour defs:
TextColor = '#000000';
BGColor   = '#8099B2';
LinkColor = '#FFFFFF';
VLinkColor= '#FFFF00';
ALinkColor= '#00FF00';

// Image defs, just change the name and possibly the width and height of the gif files:
CollapsePic = '<IMG SRC="' + homedir + 'minus.gif" HEIGHT=10 WIDTH=20 BORDER=0 ALT="- Collapse">';
ExpandPic   = '<IMG SRC="' + homedir +  'plus.gif" HEIGHT=10 WIDTH=20 BORDER=0 ALT="+ Expand">';
//BulletPic = '<IMG SRC="' + homedir +   'bul.gif" HEIGHT=10 WIDTH=20 BORDER=0 ALT="o">';
BulletPic   = '&#160;o&#160;&#160;';   // Quicker than a gif

// Font defs (JCS enhancement):
Sans  = 'Arial,Verdana,Lucida Sans,MS Sans Serif,Helvetica,Geneva,Swiss,Sans Serif';
Serif = 'Times New Roman,Times Roman,Times,Roman,Chicago,Serif';
TheFace = Sans; // change this if needed

function outline() {

/* Each branch consist of a name, a title, an html page (optional) and an last updated date (optional)
   if the html page is null, there will be no link on the titel of that branch */

  root = new branch('root','Home','index.htm','Oct 13 17:30');

     root.addKid(subbranch1 = new branch('subbranch1','This&#160;is&#160;subbranch1','subbranch1.htm','Jul 27 17:19'));
     root.addKid(subbranch2 = new branch('subbranch2','This&#160;is&#160;subbranch2',null,'Jul 27 17:19')); // note this has no link
        subbranch2.addKid(subbranch2a = new branch('subbranch2a','This&#160;is&#160;under&#160;subbranch2','sb2a.htm','Jul 27 17:19'));
        subbranch2.addKid(subbranch2b = new branch('subbranch2b','This&#160;is&#160;also&#160;under&#160;subbranch2','sb2b.htm','Jul 27 17:19'));
           subbranch2b.addKid(subbranch2b1 = new branch('subbranch2b1','This&#160;is&#160;under&#160;subbranch2b','sb2b1.htm','Jul 27 17:19'));
     root.addKid(subbranch3 = new branch('subbranch3','This&#160;is&#160;subbranch3','subbranch3.htm',  'Jul 27 17:19'));

  root.expanded = true; // use false to only show the top level when loading...
/********************* No need to modify below this line *************/
Indent = 3;Indents = 1; function IndentIt(IndentDelta) {Indents += parseInt(IndentDelta);if (Indents<1) Indents=1;IndentPic='<BR>';for (var i=1;i<Indents*Indent;i++) IndentPic+='&#160;'; return;} IndentIt('0');
Page = '';Branches = 0;BranchObj = new Object;BranchObj[0]=0;function branch(objName, name, webaddr, modified) {this.objName=objName;this.expanded=false;this.name=name;this.webaddr=webaddr;this.modified=modified;this.kid=null;this.nextPeer=null;this.addKid=addKid;this.addPeer=addPeer;this.draw=draw;BranchObj[++Branches]=this;}
function addPeer(item) {if(this.nextPeer) this.nextPeer.addPeer(item);else this.nextPeer=item;} function addKid(item) {if(this.kid) this.kid.addPeer(item);else this.kid=item;}
function expand(item) {if(!root) outline();item.expanded=true;dr();return Page;} function collapse(item) {if(!root) outline();item.expanded=false;dr();return Page;}
function draw() {if (!this.kid) { wr('\n'+IndentPic+BulletPic);if(this.webaddr) wr('<A HREF="'+homedir+this.webaddr+'" TARGET="doc" onMouseover="status=\'Modified '+this.modified+'\'; return true;\">'+this.name+'</A>'); else wr(this.name); if(this.nextPeer) this.nextPeer.draw(); else {IndentIt('-1'); return;} } else { if (this.expanded) { wr('\n'+IndentPic+'<A HREF="javascript:top.collapse(top.'+this.objName+');" onMouseover="status=\'- Collapses\'; return true;">'+CollapsePic+'</A>');
if(this.webaddr) wr('<A HREF="'+homedir+this.webaddr+'" TARGET="doc" onMouseover="status=\'Modified '+this.modified+'\'; return true;">'+this.name+'</A>');else wr(this.name);IndentIt('+1');this.kid.draw();if(this.nextPeer) this.nextPeer.draw();IndentIt('-1'); } else {wr('\n' + IndentPic + '<A HREF="javascript:top.expand(top.'+this.objName+');" onMouseover="status=\'+ Expands\'; return true;">'+ExpandPic+'</A>');if(this.webaddr) wr('<A HREF="'+homedir+this.webaddr+'" TARGET="doc" onMouseover="status=\'Modified '+this.modified+'\'; return true;">'+this.name+'</A>');
else wr(this.name);if(this.nextPeer != null) this.nextPeer.draw();IndentIt('-1'); }}}
function exall() {for (var i=1, n=Branches;i<=n;i++) {BranchObj[i].expanded = true;}dr();} function wr(text){Page += text + '\n';}
function dr(){Page = '<HTML><HEAD><BASE HREF="' + homedir + '"></HEAD>\n';wr('<BODY TEXT="'+TextColor+'" BGCOLOR="'+BGColor+'" LINK="'+LinkColor+'" VLINK="+VLinkColor+" ALINK="+ALinkColor+">'); wr('<FONT FACE="' + TheFace + '">'); Indents = 1; IndentIt('0')  root.draw(); wr('</FONT></BODY></HTML>');}
function initIt() { outline(); dr(); top.out.document.open(); top.out.document.write(Page); top.out.document.close(); top.out.defaultStatus = 'Sitemap. + expands and - collapses the tree';}
// - End of JavaScript - -->
<FRAMESET COLS="100%,*" FRAMEBORDER=0 BORDERCOLOR="#888888"><!-- modify the % to less than 100 and remove the underscore from _doc to keep the outliner and target visible -->
<FRAME NAME="out" SRC="javascript:parent.initIt();" MARGINWIDTH="2" MARGINHEIGHT="2">
<FRAME NAME="_doc" SRC="javascript:' '">
<BODY TEXT="#000000" BGCOLOR="#888888" LINK="#ffffff" VLINK="#00ffff" ALINK="#000666">
<FONT FACE="Arial,Verdana,Lucida Sans,MS Sans Serif,Helvetica,Geneva,Swiss,Sans Serif">
I doubt very much you can see this unless you are hacking my site or reading the source...

juanryahooAuthor Commented:
mplungjan: Maybe I the file has corrupted or I don´t know how to put it to work, but the following two erros appears in Netscape 4.05:

1) parent.initIt is not a function

2) illegal character
   BGColor   = '#8099B2';

My e-mail is: juanr@yahoo.com

Michel PlungjanIT ExpertCommented:
Quite possible - it seems some weird characters sneak in when cutting and pasting here...
I will send it to you immediately

juanryahooAuthor Commented:
 Ok... I did receive the file, and it works good (only a ";" was missing) Thanks.....
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now