Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to have a Tree View

Status
Not open for further replies.

campbere

Technical User
Oct 10, 2000
146
0
0
US
I currently have a visual basic application written in VB 6.0 that I am workin on taking a small section of and putting on the web using ASP.

My problem is I haven't see anything like a tree view on the web. In my VB app a user makes certain choices from drop down lists based on that they are returned zero or more records. Think of this process as a select statement you may write.

If there are records the first record is displayed in the form on the page. The user may navigate to the other results by selecting from the tree view. I am trying to duplicate this with ASP pages but haven't figured out how or seen any examples.

The closest thing I have seen would be a table of contents, but in my case the "table of contents" varies based on what the user selects.

Can someone help? Is this possible? Any examples out there?
 
If u want to use TreeView in asp (more likely in HTML script) u have to use activex objectID of the TreeView (u will find in registry)
and if u use VisualStudio please install Visual Interdev and use the object from the activex tab...

Here is my objectid from registry...
If u know how to use it with vb put your code just in place
Use just vbscript code...
This works only from Windows Browsers not from Linux or Unix..


<OBJECT classid=&quot;clsid:0713E8A2-850A-101B-AFC0-4210102A8DA7&quot; height=87 id=MyView
style=&quot;HEIGHT: 87px; LEFT: 0px; TOP: 0px; WIDTH: 254px&quot; width=254 VIEWASTEXT name=MyView>
<PARAM NAME=&quot;_ExtentX&quot; VALUE=&quot;6720&quot;>
<PARAM NAME=&quot;_ExtentY&quot; VALUE=&quot;2302&quot;>
<PARAM NAME=&quot;_Version&quot; VALUE=&quot;327682&quot;>
<PARAM NAME=&quot;HideSelection&quot; VALUE=&quot;1&quot;>
<PARAM NAME=&quot;Indentation&quot; VALUE=&quot;1000&quot;>
<PARAM NAME=&quot;LabelEdit&quot; VALUE=&quot;0&quot;>
<PARAM NAME=&quot;LineStyle&quot; VALUE=&quot;0&quot;>
<PARAM NAME=&quot;PathSeparator&quot; VALUE=&quot;\&quot;>
<PARAM NAME=&quot;Sorted&quot; VALUE=&quot;0&quot;>
<PARAM NAME=&quot;Style&quot; VALUE=&quot;7&quot;>
<PARAM NAME=&quot;ImageList&quot; VALUE=&quot;&quot;>
<PARAM NAME=&quot;BorderStyle&quot; VALUE=&quot;0&quot;>
<PARAM NAME=&quot;Appearance&quot; VALUE=&quot;1&quot;>
<PARAM NAME=&quot;MousePointer&quot; VALUE=&quot;0&quot;>
<PARAM NAME=&quot;Enabled&quot; VALUE=&quot;1&quot;>
<PARAM NAME=&quot;OLEDragMode&quot; VALUE=&quot;0&quot;>
<PARAM NAME=&quot;OLEDropMode&quot; VALUE=&quot;0&quot;>
</OBJECT> ________

George
 
I know another way to do it!
My method use an list element of HTML and a CSS property called &quot;dislay&quot;. Send me a mail if you haven't be satisfied by the previous posting. I like the HTML think cause it will be compatible with browsers (such as netscape) that don't support ActiveX technology.


Abdou
 
asiby you didn't post your email address. Please send me your example. rcksml@icqmail.com

Thanks
 
The following code is the one I was talking about. I found it first on the web site : at the address
The pictures fold.gif and list.gif are just little icons representing and open folder (fold.gif) and a file (list.gif). I will send them to rcksml@icqmail.com. You must place them in the same folder as the following code (unless you change the paths to the images).

Feel free to contact me if it does not work.

Here is the code:


<html>

<head>

<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ; list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language=&quot;JavaScript1.2&quot;>
<!--
/**
* Based on Folding Menu Tree
* Dynamic Drive (* For full source code, installation instructions,
* 100's more DHTML scripts, and Terms Of
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* by Mark Quinn (mark@robocast.com) November 2nd 1998
*/

var head=&quot;display:''&quot;
img1=new Image()
img1.src=&quot;fold.gif&quot;
img2=new Image()
img2.src=&quot;open.gif&quot;

var ns6=document.getElementById&&!document.all

function change(e){
if (!document.all&&!ns6)
return
var etarget=ns6?e.target:event.srcElement
var imagetarget=etarget
if (etarget.id==&quot;foldheader&quot;||ns6&&etarget.parentNode.id==&quot;foldheader&quot;){
if (ns6&&etarget.parentNode.id==&quot;foldheader&quot;){
nested=etarget.parentNode.nextSibling.nextSibling
imagetarget=etarget.parentNode
}
else
nested =ns6?etarget.nextSibling.nextSibling:document.all[etarget.sourceIndex+1]
if (nested.style.display==&quot;none&quot;) {
nested.style.display=''
imagetarget.style.listStyleImage=&quot;url(open.gif)&quot;
}
else {
nested.style.display=&quot;none&quot;
imagetarget.style.listStyleImage=&quot;url(fold.gif)&quot;
}
}

}

document.onclick=change

//-->
</script>
</head>



<body>

<ul>
<li id=&quot;foldheader&quot;>News</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; <li><a href=&quot; News</a></li>
<li><a href=&quot; Sun</a></li>
</ul>

<li id=&quot;foldheader&quot;>Games</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; <li><a href=&quot; Puppy</a></li>
<li><a href=&quot; Center</a></li>
</ul>

<li id=&quot;foldheader&quot;>Software</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; 1</a></li>
<li><a href=&quot; 2</a></li>
<li id=&quot;foldheader&quot;>Nested</li>
<ul id=&quot;foldinglist&quot; style=&quot;display:none&quot; style=&{head};>
<li><a href=&quot; 1</a></li>
<li><a href=&quot; 2</a></li>
</ul>
<li><a href=&quot; 3</a></li>
<li><a href=&quot; 4</a></li>
</ul>
</ul>

</body>

</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top