Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 338
  • Last Modified:

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
0
hbail
Asked:
hbail
  • 5
  • 3
1 Solution
 
shovavnikCommented:
No.  This is not a treeview related question.

What you want to do is resize the frame IN WHICH the treeview resides.

For that, you need to reset the cols collection of the frameset.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/cols_2.asp

Basically, in javascript, you would do something like:

top.cols = "0,*";// to hide the frame
top.cols = "20%,*";// to show the frame
0
 
hbailAuthor Commented:
Thanks for the feedback and you are right, I probably should have rephrased the question as to how to close an iframe portion as I figured I would probably have to set the treeview directory within an iframe.

I am using ASP.NET, so would I be able to accomplish the same type of thing using an iframe?

Thanks,
lhbail
0
 
shovavnikCommented:
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.MyIframe.style.block = 'none' or something like that.

The iframe docs can be found here:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/IFRAME.asp
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
hbailAuthor Commented:
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.display = "none";
   Form1.showframe.value = 2;
   Form1.openimage.src = "Images/dn.gif";
}
 else
 {
   Form1.showtree.style.display = "";
   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:CloseMap()" type="image" src="Images/delete.gif" align="left"></td>
<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:TreeView></td>
<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.WebControls

Public Class WebForm1
    Inherits System.Web.UI.Page


    Public Shared rootFolder As String
    Protected WithEvents TreeCtrl As Microsoft.Web.UI.WebControls.TreeView
    Protected WithEvents TreeView1 As Microsoft.Web.UI.WebControls.TreeView


#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    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.WebControls.TreeNode
            Dim imgurl As String = "TreeImages/"
            rootFolder = Server.MapPath("~/ClientServices/")
            Dim type As TreeNodeType
            type = New TreeNodeType
            type.Type = "folder"
            type.ImageUrl = imgurl + "TopPlus.gif"
            type.ExpandedImageUrl = imgurl + "TopMinus.gif"
            TreeCtrl.TreeNodeTypes.Add(type)
            type = New TreeNodeType
            type.Type = "file"
            type.ImageUrl = imgurl + "SingleMinus.gif"
            TreeCtrl.TreeNodeTypes.Add(type)

            '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(path)
        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("/").Length)
            nav.Replace("\"c, "/"c)
            n.NavigateUrl = nav
            ' set target for FRAME/IFRAME  '''''''''''''''''''''''''''''where target is set for opening content in the specified frame'''''''''''''''''''''''''''''''''''''''''''
            n.Target = "doc"
        End If
        Return n
    End Function 'Node

End Class



0
 
hbailAuthor Commented:
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.vb" Inherits="DirectoryBrowser.WebForm1"%>
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<!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 behind is the same as before**************

********************WebForm with iframes***********************
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm2.aspx.vb" Inherits="DirectoryBrowser.WebForm2" %>
<!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.display = "none";
             DocTree.hideframe.value = 2;
             }
             else
             {
             DocTree.treectl.style.display = "";
             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:CloseMap()" type="image" src="Images/delete.gif" align="left"></td>
</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>


0
 
hbailAuthor Commented:
Well, I finally found a solution that works using a regular frameset:

*********************frameset page****************************
<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>


*****************************TreeView Page*******************
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Tree.aspx.vb" Inherits="ClientServicesDemo.Tree"%>
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>

<!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:treeview></td>
                        </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_defaultClientScript content="JavaScript">
<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.cols = "0,*";
             Form1.changeValue.value = 2;
             Form1.imageSource.src = "Images/dn.gif";
             }
             else
             {
             parent.frames.mainFrame.cols = "190,75%";
             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_top.gif"></TD>
      <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:closeFrame();" src="Images/delete.gif" align="left" name="imageSource">
      </td>
      <td width="80%" bgcolor="#807c4f">&nbsp;</td>
      </tr>
      </table>
      <input type="hidden" name="changeValue" ID="changeValue">

</body>
</html>
0
 
shovavnikCommented:
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.
0
 
hbailAuthor Commented:
Your advice at least gave me some ideas, thanks.
hbail
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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