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. This article explains the way in which you can bind a specific set of nodes from XML document to the TreeView
Introduction
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.1 TreeView
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 (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).Paragraph Heading N
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 not 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
The Node elemets much start with the element name
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("
//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.Summary
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.