Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » Samples » Downloads
Add your own
alternative version

Building a TreeView on Demand Using AJAX

, 27 Nov 2006 CPOL
A simple implementation of AJAX in generating a tree view from XML, ASP.NET, and C#.
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.Configuration;

namespace ajaxtree
	/// <summary>
	/// Summary description for GetTreeContents.
	/// </summary>
	public class GetTreeContents : System.Web.UI.Page
	 	private void Page_Load(object sender, System.EventArgs e)
			//id passed thro' the url query string
			string key = Request.QueryString["q"]; 

			if (key != null)
				//read the xml tree file from the web.config file 
				//add the following key in web.config
				//<add key="XmlTree" value="~/TreeSource.XML" />
				String path = Server.MapPath(ConfigurationSettings.AppSettings["XmlTree"]);
				//I use XmlDocument object here to manipulate Xml- You can use other objects
				//You can cache the XmlDocument.OuterXml string
				XmlDocument xmlTree = new XmlDocument();
				System.IO.StringReader xmlSR = new System.IO.StringReader(xmlTree.OuterXml);
				//If you want to use database driven tree you skip above codes
				//but the columns should be there in the data table
				DataSet ds = new DataSet();
				DataView dv = ds.Tables[0].DefaultView;

				//filter for the parent
				dv.RowFilter = " ParentID = '" + key + "'";

				//render the brower with a <UL> tag and <LI> list
				//I have used some styles
				Response.Write ("<ul class='wTreeStyle'>"); 

				//write all the children here
				for(int i=0; i < dv.Count; i++)
					//formatted <LI> tag - 
					Response.Write (string.Format("<li id='{0}'><span valign='bottom' title='{1}' onclick=\"javascript:if (Toggle(this))showContentsEx('divTree{0}','{0}','');\"><IMG  align='bottom' SRC='plus.gif'> <span class='treeStyleNode' >{1}</span></span><span id ='divTree{0}'></span></li>", 
						dv[i]["NodeID"].ToString(), dv[i]["NodeName"].ToString())); 
				Response.Write ("</ul>"); 

		#region Web Form Designer generated code
		override protected void OnInit(EventArgs e)
			// CODEGEN: This call is required by the ASP.NET Web Form Designer.
		/// <summary>
		/// Required method for Designer support - do not modify
		/// the contents of this method with the code editor.
		/// </summary>
		private void InitializeComponent()
			this.Load += new System.EventHandler(this.Page_Load);


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
United States United States
AJFK (Abduljaleel Faisel kakkidi) is an IT Consultant in US. He has been developing and designing MS Client server and Web solutions since 1997. His expertise lies in developing scalable, high-performance Web solutions for various fields. Hobbies include teaching, and reading books. AJ Kakkidi has a Bachelor of Physics, and Masters of Computer Applications. He can be reached at ajkakkidi at

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150327.1 | Last Updated 27 Nov 2006
Article Copyright 2006 by AJFK
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid