Treeview - XML, XPATH - Show part of XML Document

Treeview is one of the important controls being used in applications to improve the usability experience for users for displaying Hierarchial Data.

ASP.NET 1.x versions did not ship with a built-in treeview control as a part of the Web Controls. However Microsoft did release a set of UI Controls including the Treeview, Tabstrip Control etc., collectively called as Microsoft IE Webcontrols.

Though Microsoft doesnt support these controls currently (as mentioned in their MSDN Documentation), those controls do provide a great resource for developing web applications with rich user experience.

Treeview is one such component which is very useful in representing Hierarchial Data (mostly based on XML structure).

Whidbey (ASP.NET 2.0) does come with a built-in TreeView control, Menu Control etc.,which are part of the current IE Webcontrols and I guess that much be one of the reasons for Microsoft to stop supporting the existing IE Webcontrols which have a lot of limitations.

However, even with the current TreeView control we can very well utilize the Hierarchial structure of representing data.

You can bind a Treeview to an XML Document (which is a common practice since XML is again a hierarchial data representation). But with the current Treeview control, the XML needs to adhere to certain standards.

The Root Node must be <TREENODE> and it MUST be in Caps. Otherwise, it would raise a "did not contain the required outer <TREENODES> container. " Error.

The Node elemets much start with the element name <treenode> and must have the attribute Text which is the text displayed in the TreeView Node. You can as well enhance the look and feel by specifying ImageURL, CheckBox, NavigateURL etc.,

However, on some occasions we would like to show only a portion of the XML Document. Say you want to show only certain set of Nodes based on a condition. An xml document may contain a lot of nodes from which we would like to display particular nodes. That is a little tricky since you need an XML file with the strucutre as explained above for the TreeView to display properly.

I give herebelow the steps involved in selecting particular nodes of an XML Document to display in TreeView. I am using XPATH to select particular set of nodes. If you are unfamiliar with XPATH, it is a W3C Standard for querying and retrieving XML Data from XML Documents. XPATH is fully supported in .NET and there are lots of classes and methods provided with XPATH to navigate and query XML Documents. More information on XPATH and an excellent Tutorial can be found at
XPATH Tutorial

Let us consider the following XML Tailored to suit the format required for TreeView

<TREENODES>
<treenode Text="Books" ID="1" Category="Fiction">
<treenode Text="Look Into Future" ID="1"/>
<treenode Text="What Tomorrow would be?" ID="1"/>
<treenode Text="Books" ID="1"/>
</treenode>
<treenode Text="Books" ID="2" Category="History">
<treenode Text="American History" ID="1"/>
<treenode Text="Indian History" ID="1"/>
<treenode Text="Japanese History" ID="1"/>
<treenode Text="UK History" ID="1"/>
</treenode>
<treenode Text="Books" ID="3" Category="Cartoon">
<treenode Text="Tom and Jerry" ID="1"/>
<treenode Text="Mickey Mouse" ID="1"/>
<treenode Text="Donald Duck" ID="1"/>
</treenode>
<treenode Text="Books" ID="4" Category="Mystery">
<treenode Text="Da Vinci Code" ID="1"/>
<treenode Text="The Wheels" ID="1"/>
<treenode Text="Chasing a Crooked Shadow" ID="1"/>
</treenode>
</TREENODES>


We will save the above file as "Books.XML". Note that the above XML already has the relevant format for binding to the TreeView as per its requirement. We will see in future articles on how to transform a generic XML format into one required for the TreeView as above.

Now, the code to select only Books of Category "Mystery" and display in the TreeView.

using System.IO;
using System.XML;


StringWriter sWriter = new StringWriter();
// Creating a String Writer object

XmlTextWriter xWriter = new XmlTextWriter(sWriter);
// Creating a Xml Writer object

XmlDocument xDoc = new XmlDocument();

xDoc.Load(Server.MapPath("Books.XML"));
//Loading the original XML Document

XmlElement xRoot = xDoc.DocumentElement;
// Creating the Root Element.

string xPathExpr = "//treenode[@ID=4]/descendant-or-self::*";
// XPATH Expression to select specific nodes.

XmlNode xNode = xRoot.SelectSingleNode(xPathExpr);

//Selecting the Node which is the parent node matching the XPATH Expression

if(xNode != null)
{

XmlDocument xNewDoc = new XmlDocument();

xNewDoc.LoadXml("<TREENODES></TREENODES>");
//Creating a Dynamic XML to attach the TREENODE Element to the specific node set.

XmlNode xImpNode = xNewDoc.ImportNode(xNode, true);
//Creating and importing the Node from the original XML Document. The true value indicates, all the child nodes for this node will be selected.

xNewDoc.DocumentElement.AppendChild(xImpNode);
//Appending the Nodes Imported to the Dynamic XML Document.

xNewDoc.WriteTo(xWriter);
//Writing the Appended Nodes to the XML Writer

TreeView1.TreeNodeSrc = sWriter.ToString();
//Assigning the TreeNodeSrc property with the StringWriter which contains the XmlText

TreeView1.DataBind();
}

Though for simplicity I have a 2 level Hierarchy XML Structure, the above code would select all TreeNode elements having attribute ID with the value 4 irrespective of where the Nodes are there in the Tree Hierarchy ie., even if there are child nodes containing Book Details, they will also be selected to give the Tree structure (Parent - Child - Child structure)

This would facilitate in showing only specific portion of an XML which is currently difficult to implement with the IE Webcontrols.

As already explained, this has been much more simplified in ASP.NET 2.0 (Whidbey) which ships with a built-in TreeView control containing a property to specify the XPATH Expression for selecting specific nodes.

Cheers and Happy Tree Viewing !!!

 

Print | posted on Monday, August 29, 2005 11:47 AM

Comments on this post

# re: Treeview - XML, XPATH - Show part of XML Document

Requesting Gravatar...
Error in these lines

TreeView1.TreeNodeSrc = sWriter.ToString();
TreeView1.DataBind();

there is no TreeNodeSrc and DataBind Property for TreeView.


Left by mac on Nov 27, 2008 6:19 PM

# re: Treeview - XML, XPATH - Show part of XML Document

Requesting Gravatar...
thanks admin.
Left by mario oyunları on Sep 21, 2009 10:35 AM

# re: Treeview - XML, XPATH - Show part of XML Document

Requesting Gravatar...
this is very good stuff!
Left by mini skirt on Apr 11, 2010 11:06 AM

# kncal

Requesting Gravatar...
ahriuo[url=http://www.kkk.com]arga[/url]jfoparjpofraga
Left by nsja on Apr 27, 2010 8:57 PM

Your comment:

 (will show your gravatar)