Solved

How to close a Treeview directory

Posted on 2004-08-30
8
327 Views
Last Modified: 2012-05-05
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
Comment
Question by:hbail
  • 5
  • 3
8 Comments
 
LVL 8

Accepted Solution

by:
shovavnik earned 250 total points
ID: 11940649
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
 

Author Comment

by:hbail
ID: 11941467
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
 
LVL 8

Expert Comment

by:shovavnik
ID: 11941541
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
 

Author Comment

by:hbail
ID: 11943703
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:hbail
ID: 11945185
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
 

Author Comment

by:hbail
ID: 11973751
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
 
LVL 8

Expert Comment

by:shovavnik
ID: 11988342
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
 

Author Comment

by:hbail
ID: 11995904
Your advice at least gave me some ideas, thanks.
hbail
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

707 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now