Solved

How to close a Treeview directory

Posted on 2004-08-30
8
334 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

635 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