Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » General » Downloads
 
Add your own
alternative version
Go to top

DHTML Tree View of Arbitrary Depth using AJAX

, 25 Aug 2005
This article provides a gentle introduction to AJAX by applying that technology to significantly enhance a tree previously rendered using JavaScript.
ajax_treeview_src.zip
ajax_treeview_src
ajax_treeview_src11
Global.asax
img
folder_closed.gif
folder_open.gif
minus.gif
plus.gif
transparent.gif
ajax_treeview_src20
App_Code
App_Data
img
folder_closed.gif
folder_open.gif
minus.gif
plus.gif
transparent.gif
ajax_treeview_src11.zip
img
folder_closed.gif
folder_open.gif
minus.gif
plus.gif
Thumbs.db
transparent.gif
Global.asax
// Copyright (c)2005 Rewritten Software.  http://www.rewrittensoftware.com
// This script is supplied "as is" without any form of warranty. Rewritten Software 
// shall not be liable for any loss or damage to person or property as a result of using this script.
// Use this script at your own risk!
// You are licensed to use this script free of charge for commercial or non-commercial use providing you do not remove 
// the copyright notice or disclaimer.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

/// <summary>
/// Summary description for Tree
/// </summary>
public class Tree
{
    private string id;

    /// <summary>
    /// The id to store the tree against in the session
    /// </summary>
    public string ID
    {
        get { return id; }
    }
	
    /// <summary>
    /// Constructor of the tree
    /// </summary>
    /// <param name="id"></param>
	public Tree(string id)
	{
        this.id = id;
        root = null;
	}

    private TreeNode root;

    /// <summary>
    /// The root node of the tree
    /// </summary>
    public TreeNode Root
    {
        get { return root; }
        set { root = value; }
    }
	
}

/// <summary>
/// A node in the tree
/// </summary>
public class TreeNode
{
    private string guid;

    /// <summary>
    /// Unique identifier for this node
    /// </summary>
    public string ID
    {
        get { return guid; }
    }

    private string text;

    /// <summary>
    /// The text to present on the tree node
    /// </summary>
    public string Text
    {
        get { return text; }
        set { text = value; }
    }

    private string url;

    /// <summary>
    /// URL to link to from tree node
    /// </summary>
    public string Url
    {
        get { return url; }
        set { url = value; }
    }

    private string imageClosed;

    /// <summary>
    /// Index of the image to show for the node
    /// </summary>
    public string ImageClosed
    {
        get { return imageClosed; }
        set { imageClosed = value; }
    }

    private string imageOpen;

    /// <summary>
    /// Image index to show when node is open
    /// </summary>
    public string ImageOpen
    {
        get { return imageOpen; }
        set { imageOpen = value; }
    }

    private System.Collections.ArrayList children = new System.Collections.ArrayList();

    /// <summary>
    /// A list of children of this node.
    /// </summary>
    public System.Collections.ArrayList Children
    {
        get { return children; }
        set { children = value; }
    }

    private bool expanded;

    /// <summary>
    /// Show the node as expanded or not.
    /// This does not reflect the runtime state of the tree, only the initial render
    /// state.
    /// </summary>
    public bool Expanded
    {
        get { return expanded; }
        set { expanded = value; }
    }


    /// <summary>
    /// Constructor for a treenode
    /// </summary>
    /// <param name="text">text to show</param>
    /// <param name="url">url to link to</param>
    /// <param name="imageIndexClosed">image to use</param>
    public TreeNode(string text, string url, string imageOpen, string imageClosed)
    {
        this.text = text;
        this.url = url;
        this.imageClosed = imageClosed;
        this.imageOpen = imageOpen;

        // Allocate a unique id for this node so it can be found again.
        this.guid = Guid.NewGuid().ToString();

        // Default is node will be collapsed.
        this.expanded = false;
    }

    /// <summary>
    /// Output the HTML to render a node and optionally fill in its children.
    /// </summary>
    /// <param name="writer"></param>
    /// <param name="treeID"></param>
    /// <param name="delayLoad"></param>
    public void WriteNode(HtmlTextWriter writer, string treeID, bool delayLoad)
    {

        // Work out which of plus, minus or empty to show.
        String plusImg = "plus.gif";
        if (this.Children.Count == 0)
            plusImg = "transparent.gif";
        else if (this.expanded)
            plusImg = "minus.gif";

        // Show the child if it is expanded
        String displayChild = "block";
        if (!this.Expanded)
            displayChild = "none";

        // Set up for the delay load call if the node is not loaded at this time
        string expand = String.Format("javascript:Toggle('{0}');", this.ID);
        if (!this.expanded && delayLoad)
            expand = String.Format("javascript:DelayLoadNode('{0}', '{1}');", treeID, this.ID);

        writer.Write("<table border=\"0\" cellpadding=\"1\" cellspacing=\"1\"><tr>");
        writer.Write(String.Format("<td width=\"16\"><a id=\"P{0}\" href=\"{1}\">", this.ID, expand));
        writer.Write(String.Format("<img src='img/{0}' width='16' height='16' hspace='0' vspace='0' border='0'/>", plusImg));
        writer.Write("</a></td>");
        writer.Write(String.Format("<td width=\"16\"><a id=\"I{0}\" href=\"{1}\">", this.ID, expand));
        writer.Write(String.Format("<img id='O{1}' style='display:{2}' src='{0}' width='16' height='16' hspace='0' vspace='0' border='0'/>", ImageOpen, this.ID, this.Expanded ? "block" : "none"));
        writer.Write(String.Format("<img id='C{1}' style='display:{2}' src='{0}' width='16' height='16' hspace='0' vspace='0' border='0'/>", ImageClosed, this.ID, this.Expanded ? "none" : "block"));
        writer.Write("</a></td>");
        writer.Write(String.Format("<td nowrap=\"true\"><a id=\"{0}\" href=\"{1}\">{2}</a></td>", this.ID, this.Url != null ? this.Url : "_blank", this.Text));
        writer.Write("</table>");

        // Content holder for the child nodes
        writer.Write(String.Format("<div style=\"display:{1};margin-left:2em\" id=\"D{0}\">", this.ID, displayChild));

        // And do the children only if we are not delay loading.
        if (!delayLoad)
        {
            foreach (TreeNode child in this.Children)
            {
                child.WriteNode(writer, treeID, delayLoad);
            }
        }

        writer.Write(String.Format("</div>"));
    }

}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Adrian Holland
Architect Webefinity
Australia Australia
Adrian is current the Solution Architect at CubeBuild.com.
 
The core of CubeBuild is a website and application platform that is pluggable into ASP.NET MVC. Any MVC application can have content authoring added to its pages with little effort, and new content types are created using IronPython.NET open source components.
 
We are currently deploying a Point of Service (Web based POS) built on CubeBuild which allows a single web channel for face-to-face sales, and sales through your online store. All from a single inventory base, and from any device.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 26 Aug 2005
Article Copyright 2005 by Adrian Holland
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid