hbail
asked on
How to close a Treeview directory
I need to find a way to give a user the option of closing a treeview control directory to expand the space on the page in a similar fashion to the side directory menu on the microsoft website ( http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/webcontrols_entry.asp)
Is there a javascript function I can call when a user clicks on an image above the treeview to close it and expand the main frame?
Thanks,
hbail
Is there a javascript function I can call when a user clicks on an image above the treeview to close it and expand the main frame?
Thanks,
hbail
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Yeah, it's possible, but I don't remember which command does the trick.
I think you can just set it's block style to none:
window.parent.frames.MyIfr
The iframe docs can be found here:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/IFRAME.asp
I think you can just set it's block style to none:
window.parent.frames.MyIfr
The iframe docs can be found here:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/IFRAME.asp
ASKER
Here is my basic code so far. I get no errors, but when I click the image that calls the javascript function it just does a quick process but the tree is still there. I'm not sure how to place the treeview to show within an iframe and still have the links work when clicking on a node. I have the nodes set to open in the iframe when clicked, but not sure how to get the treeview to be in its own frame on the left.
function CloseMap()
{
var showframe;
showframe = Form1.showframe.value;
if (showframe == 1 || showframe == "")
{
Form1.showtree.style.displ
Form1.showframe.value = 2;
Form1.openimage.src = "Images/dn.gif";
}
else
{
Form1.showtree.style.displ
Form1.showframe.value = 1;
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 16px" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<td noWrap width="112" height="17" style="WIDTH: 112px; HEIGHT: 17px">Document Map</td>
<td height="17" style="WIDTH: 7px; HEIGHT: 17px">
<input id=openimage title="Hide Document Map" onclick="javascript:CloseM
<td style="WIDTH: 345px; HEIGHT: 17px"></td>
<TD style="HEIGHT: 17px"></TD>
</TR>
<TR>
<tr height="100%">
<td vAlign="top" id="showtree" nowrap width="465" colspan="3" style="DISPLAY: block;Z-INDEX: 105;WIDTH: 465px">
<iewc:TreeView id="TreeCtrl" runat="server"></iewc:Tree
<td vAlign="top" width="100%" height="100%" id="doc" style="DISPLAY: block;Z-INDEX: 104"></td>
</tr>
</TABLE>
<input type="hidden" name="showframe" style="Z-INDEX: 102; LEFT: 16px; POSITION: absolute; TOP: 112px">
</form>
*****************The code behind aspx.vb page**********************
Imports System
Imports System.IO
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Data.SqlClient
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports Microsoft.Web.UI.WebContro
Public Class WebForm1
Inherits System.Web.UI.Page
Public Shared rootFolder As String
Protected WithEvents TreeCtrl As Microsoft.Web.UI.WebContro
Protected WithEvents TreeView1 As Microsoft.Web.UI.WebContro
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.Debugg
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Public Sub New()
AddHandler Page.Init, AddressOf Page_Init
End Sub 'New
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
' add tree node "type" for folders and files
Dim rootNode As New Microsoft.Web.UI.WebContro
Dim imgurl As String = "TreeImages/"
rootFolder = Server.MapPath("~/ClientSe
Dim type As TreeNodeType
type = New TreeNodeType
type.Type = "folder"
type.ImageUrl = imgurl + "TopPlus.gif"
type.ExpandedImageUrl = imgurl + "TopMinus.gif"
TreeCtrl.TreeNodeTypes.Add
type = New TreeNodeType
type.Type = "file"
type.ImageUrl = imgurl + "SingleMinus.gif"
TreeCtrl.TreeNodeTypes.Add
'start the recursively load from our application root path
'(add the trailing "/" for a little substring trimming below)
GetFolders(rootFolder, TreeCtrl.Nodes)
'expand levels of the tree
TreeCtrl.ExpandLevel = 0
End If
'set literal to root folder
End Sub
'recursive method to load all folders and files into tree
Public Sub GetFolders(ByVal path As String, ByVal nodes As TreeNodeCollection)
' add nodes for all directories (folders)
Dim dirs As String() = Directory.GetDirectories(p
Dim p As String
Dim dp As String
'Dim node As TreeNode
Dim files As String() = Directory.GetFiles(path, "*")
' add nodes for all directories in this directory (folder)
For Each p In dirs
dp = p.Substring(path.Length)
If Not dp.Equals("treeimages") Then
nodes.Add(Node("", p.Substring(path.Length), "folder"))
End If
Next
' add nodes for all files in this directory (folder)
For Each p In files
nodes.Add(Node(p, p.Substring(path.Length), "file"))
Next p
' add all subdirectories for each directory (recursive)
Dim i As Integer
For i = 0 To nodes.Count - 1
If nodes(i).Type = "folder" Then
GetFolders(dirs(i) + "\", nodes(i).Nodes)
End If
Next i
End Sub
' create a TreeNode from the specified path, text and type
Private Function Node(ByVal path As String, ByVal [text] As String, ByVal type As String) As TreeNode
Dim n As New TreeNode
n.Type = type
n.Text = [text]
If type = "file" Then
' strip off the physical application root portion of path
Dim nav As String = "/" + path.Substring(MapPath("/"
nav.Replace("\"c, "/"c)
n.NavigateUrl = nav
' set target for FRAME/IFRAME ''''''''''''''''''''''''''
n.Target = "doc"
End If
Return n
End Function 'Node
End Class
function CloseMap()
{
var showframe;
showframe = Form1.showframe.value;
if (showframe == 1 || showframe == "")
{
Form1.showtree.style.displ
Form1.showframe.value = 2;
Form1.openimage.src = "Images/dn.gif";
}
else
{
Form1.showtree.style.displ
Form1.showframe.value = 1;
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 16px" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<td noWrap width="112" height="17" style="WIDTH: 112px; HEIGHT: 17px">Document Map</td>
<td height="17" style="WIDTH: 7px; HEIGHT: 17px">
<input id=openimage title="Hide Document Map" onclick="javascript:CloseM
<td style="WIDTH: 345px; HEIGHT: 17px"></td>
<TD style="HEIGHT: 17px"></TD>
</TR>
<TR>
<tr height="100%">
<td vAlign="top" id="showtree" nowrap width="465" colspan="3" style="DISPLAY: block;Z-INDEX: 105;WIDTH: 465px">
<iewc:TreeView id="TreeCtrl" runat="server"></iewc:Tree
<td vAlign="top" width="100%" height="100%" id="doc" style="DISPLAY: block;Z-INDEX: 104"></td>
</tr>
</TABLE>
<input type="hidden" name="showframe" style="Z-INDEX: 102; LEFT: 16px; POSITION: absolute; TOP: 112px">
</form>
*****************The code behind aspx.vb page**********************
Imports System
Imports System.IO
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Data.SqlClient
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports Microsoft.Web.UI.WebContro
Public Class WebForm1
Inherits System.Web.UI.Page
Public Shared rootFolder As String
Protected WithEvents TreeCtrl As Microsoft.Web.UI.WebContro
Protected WithEvents TreeView1 As Microsoft.Web.UI.WebContro
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.Debugg
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Public Sub New()
AddHandler Page.Init, AddressOf Page_Init
End Sub 'New
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
' add tree node "type" for folders and files
Dim rootNode As New Microsoft.Web.UI.WebContro
Dim imgurl As String = "TreeImages/"
rootFolder = Server.MapPath("~/ClientSe
Dim type As TreeNodeType
type = New TreeNodeType
type.Type = "folder"
type.ImageUrl = imgurl + "TopPlus.gif"
type.ExpandedImageUrl = imgurl + "TopMinus.gif"
TreeCtrl.TreeNodeTypes.Add
type = New TreeNodeType
type.Type = "file"
type.ImageUrl = imgurl + "SingleMinus.gif"
TreeCtrl.TreeNodeTypes.Add
'start the recursively load from our application root path
'(add the trailing "/" for a little substring trimming below)
GetFolders(rootFolder, TreeCtrl.Nodes)
'expand levels of the tree
TreeCtrl.ExpandLevel = 0
End If
'set literal to root folder
End Sub
'recursive method to load all folders and files into tree
Public Sub GetFolders(ByVal path As String, ByVal nodes As TreeNodeCollection)
' add nodes for all directories (folders)
Dim dirs As String() = Directory.GetDirectories(p
Dim p As String
Dim dp As String
'Dim node As TreeNode
Dim files As String() = Directory.GetFiles(path, "*")
' add nodes for all directories in this directory (folder)
For Each p In dirs
dp = p.Substring(path.Length)
If Not dp.Equals("treeimages") Then
nodes.Add(Node("", p.Substring(path.Length), "folder"))
End If
Next
' add nodes for all files in this directory (folder)
For Each p In files
nodes.Add(Node(p, p.Substring(path.Length), "file"))
Next p
' add all subdirectories for each directory (recursive)
Dim i As Integer
For i = 0 To nodes.Count - 1
If nodes(i).Type = "folder" Then
GetFolders(dirs(i) + "\", nodes(i).Nodes)
End If
Next i
End Sub
' create a TreeNode from the specified path, text and type
Private Function Node(ByVal path As String, ByVal [text] As String, ByVal type As String) As TreeNode
Dim n As New TreeNode
n.Type = type
n.Text = [text]
If type = "file" Then
' strip off the physical application root portion of path
Dim nav As String = "/" + path.Substring(MapPath("/"
nav.Replace("\"c, "/"c)
n.NavigateUrl = nav
' set target for FRAME/IFRAME ''''''''''''''''''''''''''
n.Target = "doc"
End If
Return n
End Function 'Node
End Class
ASKER
O.K. I now have the treeview opening in its own iframe and the links for the nodes will open in another iframe, but how do I close the iframe, and it's contents, window with the treeview without closing the contents that is opened in the other iframe? Right now when I click the image that calls the javascript function it basically resets the page, the treeview is still there but retracted to the parent node and the content that was opened is now gone. I have a feeling this is happening because when you close a particular node it will also close the contents that was being viewed and when I try to close the iframe it is treating viewing the contents in the same fashion.
**********TreeView page**********
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.U
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Tree" name="Tree" method="post" runat="server">
<table height="100%" cellSpacing="0" cellPadding="5" width="100%" border="0">
<tr height="100%">
<td vAlign="top" id=showtree nowrap>
<mytree:treeview id="TreeCtrl" runat="server">
</mytree:treeview></td>
</tr>
</table>
</form>
</body>
</HTML>
**********************Code
********************WebFor
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm2.aspx.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript">
function CloseMap()
{
if (DocTree.hideframe.value == 1 || DocTree.hideframe.value == "")
{
DocTree.treectl.style.disp
DocTree.hideframe.value = 2;
}
else
{
DocTree.treectl.style.disp
DocTree.hideframe.value = 1;
}
}
</script>
</HEAD>
<body>
<form id="DocTree" name="DocTree" method="post" runat="server">
<table height="100%" cellSpacing="0" cellPadding="5" width="100%" border="0">
<tr>
<td vAlign="bottom" noWrap width="135" height="16">Document Map</td>
<td height="16"><input title="Hide Document Map" onclick="javascript:CloseM
</tr>
<tr height="100%">
<td vAlign="top" id="showtree" nowrap width="174">
<iframe src="WebForm1.aspx" id="treectl" name="treectl" align="top" frameBorder="no" width="100%" scrolling="auto" height="100%"></iframe>
<td vAlign="top" width="100%" height="100%">
<iframe id="doc" name="doc" align="top" frameBorder="no" width="100%" scrolling="auto" height="100%">
</iframe>
</td>
</tr>
</table>
<input type="hidden" value="1" name="hideframe">
</form>
</body>
</HTML>
**********TreeView page**********
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.U
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Tree" name="Tree" method="post" runat="server">
<table height="100%" cellSpacing="0" cellPadding="5" width="100%" border="0">
<tr height="100%">
<td vAlign="top" id=showtree nowrap>
<mytree:treeview id="TreeCtrl" runat="server">
</mytree:treeview></td>
</tr>
</table>
</form>
</body>
</HTML>
**********************Code
********************WebFor
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm2.aspx.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script language="javascript">
function CloseMap()
{
if (DocTree.hideframe.value == 1 || DocTree.hideframe.value == "")
{
DocTree.treectl.style.disp
DocTree.hideframe.value = 2;
}
else
{
DocTree.treectl.style.disp
DocTree.hideframe.value = 1;
}
}
</script>
</HEAD>
<body>
<form id="DocTree" name="DocTree" method="post" runat="server">
<table height="100%" cellSpacing="0" cellPadding="5" width="100%" border="0">
<tr>
<td vAlign="bottom" noWrap width="135" height="16">Document Map</td>
<td height="16"><input title="Hide Document Map" onclick="javascript:CloseM
</tr>
<tr height="100%">
<td vAlign="top" id="showtree" nowrap width="174">
<iframe src="WebForm1.aspx" id="treectl" name="treectl" align="top" frameBorder="no" width="100%" scrolling="auto" height="100%"></iframe>
<td vAlign="top" width="100%" height="100%">
<iframe id="doc" name="doc" align="top" frameBorder="no" width="100%" scrolling="auto" height="100%">
</iframe>
</td>
</tr>
</table>
<input type="hidden" value="1" name="hideframe">
</form>
</body>
</HTML>
ASKER
Well, I finally found a solution that works using a regular frameset:
*********************frame
<html>
<head>
<TITLE>Process and Procedures</TITLE>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</head>
<frameset rows="48,88%">
<frame name="banner" marginWidth="0" src="TreeHeader.htm" frameBorder="no" noResize scrolling="no"
height="17">
<frameset id="mainFrame" cols="190,75%">
<frame name="contents" height="50%" src="BrowserTree.aspx" scrolling="auto" marginheight="0" marginwidth="0">
<frame name="main" marginheight="0" marginwidth="0" src="">
</frameset>
</frameset>
</html>
**************************
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Tree.aspx.vb" Inherits="ClientServicesDe
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.U
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Tree" name="Tree" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td vAlign="top" id="showtree" nowrap>
<mytree:treeview id="TreeView" runat="server"></mytree:tr
</tr>
</table>
</form>
</body>
</HTML>
********************The Header Page/Holds the javascript code*****************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TreeHeader</title>
<meta name=vs_defaultClientScrip
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<script language="javascript" type="text/Jscript">
function closeFrame(){
var chgvle;
chgvle = Form1.changeValue.value;
if(chgvle == "" || chgvle == 1)
{
parent.frames.mainFrame.co
Form1.changeValue.value = 2;
Form1.imageSource.src = "Images/dn.gif";
}
else
{
parent.frames.mainFrame.co
Form1.changeValue.value = 1;
Form1.imageSource.src = "Images/delete.gif";
}
}
</script>
<LINK href="Styles.css" type="text/css" rel="stylesheet">
</HEAD>
<body MS_POSITIONING="GridLayout
<form id="Form1" method="post" runat="server">
<table id="Table1" cellSpacing="0" cellPadding="0" width="600" border="0">
<tr>
<TR>
<TD style="WIDTH: 189px; HEIGHT: 17px" vAlign="top" width="189" colSpan="2">
<IMG id="IMG1" height="17" alt="" src="Images/black_lines_to
<th style="WIDTH: 411px; HEIGHT: 17px" noWrap align="center" colSpan="2">
Process and Procedures</th></TR>
</table>
<table height="17" cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table2">
<tr>
<td style="WIDTH: 166px; COLOR: #807c4f" vAlign="bottom" noWrap width="166" bgColor="#cfd0c2" height="16">Document Map</td>
<td style="WIDTH: 29px" width="29" bgColor="#cfd0c2" height="16">
<IMG title="Hide Document Map" onclick="javascript:closeF
</td>
<td width="80%" bgcolor="#807c4f"> </
</tr>
</table>
<input type="hidden" name="changeValue" ID="changeValue">
</body>
</html>
*********************frame
<html>
<head>
<TITLE>Process and Procedures</TITLE>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
</head>
<frameset rows="48,88%">
<frame name="banner" marginWidth="0" src="TreeHeader.htm" frameBorder="no" noResize scrolling="no"
height="17">
<frameset id="mainFrame" cols="190,75%">
<frame name="contents" height="50%" src="BrowserTree.aspx" scrolling="auto" marginheight="0" marginwidth="0">
<frame name="main" marginheight="0" marginwidth="0" src="">
</frameset>
</frameset>
</html>
**************************
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Tree.aspx.vb" Inherits="ClientServicesDe
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.U
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Tree" name="Tree" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td vAlign="top" id="showtree" nowrap>
<mytree:treeview id="TreeView" runat="server"></mytree:tr
</tr>
</table>
</form>
</body>
</HTML>
********************The Header Page/Holds the javascript code*****************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TreeHeader</title>
<meta name=vs_defaultClientScrip
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
<script language="javascript" type="text/Jscript">
function closeFrame(){
var chgvle;
chgvle = Form1.changeValue.value;
if(chgvle == "" || chgvle == 1)
{
parent.frames.mainFrame.co
Form1.changeValue.value = 2;
Form1.imageSource.src = "Images/dn.gif";
}
else
{
parent.frames.mainFrame.co
Form1.changeValue.value = 1;
Form1.imageSource.src = "Images/delete.gif";
}
}
</script>
<LINK href="Styles.css" type="text/css" rel="stylesheet">
</HEAD>
<body MS_POSITIONING="GridLayout
<form id="Form1" method="post" runat="server">
<table id="Table1" cellSpacing="0" cellPadding="0" width="600" border="0">
<tr>
<TR>
<TD style="WIDTH: 189px; HEIGHT: 17px" vAlign="top" width="189" colSpan="2">
<IMG id="IMG1" height="17" alt="" src="Images/black_lines_to
<th style="WIDTH: 411px; HEIGHT: 17px" noWrap align="center" colSpan="2">
Process and Procedures</th></TR>
</table>
<table height="17" cellSpacing="0" cellPadding="0" width="100%" border="0" ID="Table2">
<tr>
<td style="WIDTH: 166px; COLOR: #807c4f" vAlign="bottom" noWrap width="166" bgColor="#cfd0c2" height="16">Document Map</td>
<td style="WIDTH: 29px" width="29" bgColor="#cfd0c2" height="16">
<IMG title="Hide Document Map" onclick="javascript:closeF
</td>
<td width="80%" bgcolor="#807c4f"> </
</tr>
</table>
<input type="hidden" name="changeValue" ID="changeValue">
</body>
</html>
Hey hbail,
I take it you've found a solution?
If you don't want to award points (did my advice help you?), then please request to close the question in community support.
I take it you've found a solution?
If you don't want to award points (did my advice help you?), then please request to close the question in community support.
ASKER
Your advice at least gave me some ideas, thanks.
hbail
hbail
ASKER
I am using ASP.NET, so would I be able to accomplish the same type of thing using an iframe?
Thanks,
lhbail