Mark Wilson I am the creator of TopXML. I am available for international and local (Australia) contracts. I am a Solution Architect/Business Analyst. I have worked in IT in several countries (NZ, Australia, South Africa, UK) building and training teams for government and very large non-governmental organizations. I am ex-Microsoft Consulting Services. I wrote the first book on Microsoft XML published in 2000 called XML Programming with VB and ASP. Most recently I have been building tools for the SEO industry. Ask me for a 37 point SEO health-checkup for your website.
First posted :
03/24/2008
Times viewed :
675
XML Data and a TreeView
When we work with data already in XML format we do not have to
build up a Tree View node-by-node. The Tree View can automatically turn XML
data into a hierarchy of nodes – if the XML document follows the structure of
the fragment below:
<TREENODES>
<TREENODE TEXT="Order # 100">
<TREENODE TEXT="OrderItem #1">
<TREENODE TEXT="Product #76" />
</TREENODE>
</TREENODE>
</TREENODES>
We can bind an XML document to a Tree View in a number of
different ways:
By
assigning a string containing the XML document to the TreeNodeSrc property of
the control object,
By
assigning a string containing a path to an XML file to the TreeNodeSrc
property,
By
referencing an XML file from the TreeNodeSrc attribute of the <treeview>
tag.
The Tree View maps the structure of this XML document to
nodes in the tree. Every <TREENODE> element in the XML document turns
into a tree node. Nested <TREENODE>s turn into nested nodes. That is very
intuitive, isn’t it? But hey, how many applications pass around XML data in
this particular format? Not very many for sure. There are, however, some more
properties on the TreeView class that help us transforming any given XML format
into the Tree View format if we provide an XSLT stylesheet. We assign the path
to a stylesheet to the Tree View’s TreeNodeXsltSrc property and the control
applies the stylesheet to the assigned XML data. The table lists these and all
the other properties of the TreeView class.
Table 17.2: We can customize a TreeView either programmatically
through properties or through attributes on the treeview tag. Every attribute
corresponds to a property. You can also
set these attributes on the treeview tag directly if you do not need to
customize them. You cannot specify them in the stylesheet as attributes on the
not the <TREENODES> element. Here
we do NOT LIST THE
PROPERTIES DERIVED FROM WEB CONTROL
Property
Attribute
Description
bool AutoPostBack
{ get; set }
AUTOPOSTBACK
Controls if user events on the node trigger event handlers
on the server.
bool AutoSelect
{ get; set }
AUTOSELECT
A flag indicating if keyboard navigation through the tree
selects a node. Hitting the enter key is required to select a node when
AutoSelect is set to false.
string ChildType
{ get; set }
CHILDTYPE
The TreeNodeType for the tree nodes.
CssCollection DefaultStyle
{ get; set }
DEFAULTSTYLE
The default HTML styles for rendering the tree nodes.
string ExpandedImageUrl
{ get; set }
EXPANDEDIMAGEURL
The URL of the image displayed for expanded nodes.
int ExpandLevel
{ get; set }
EXPANDLEVEL
The number of child levels to display expanded initially.
FontInfo Font
{ get }
FONT
The font of the node text.
System.Drawing.Color ForeColor
{ get; set }
FORECOLOR
The
color of the text.
CssCollection HoverStyle
{ get; set }
HOVERSTYLE
The style of the element when the mouse cursor hovers over
a node or when the node has the keyboard focus.
string ImageUrl
{ get; set }
IMAGEURL
The URL of the image displayed collapsed tree nodes.
int Indent
{ get; set }
INDENT
The number of pixels to indent child nodes from the parent
node.
TreeNodeCollection Nodes
{ get }
N/A
string SelectedImageUrl
{ get; set }
SELECTEDIMAGEURL
The URL of the image displayed selected tree nodes.
string SelectedNodeIndex
{ get; set }
SELECTEDNODEINDEX
The index of the selected node. The index is a specially
formatted string. It identifies the path to a node in the tree through the
zero-based indeces of nodes within a level separated by dots. For example the
index of the second child of the first top-level node would be “0.1”.
CssCollection SelectedStyle
{ get; set }
SELECTEDSTYLE
The style for the selected element. The SELECTEDSTYLE
attribute in the XML data source takes the same form as an HTML style
attribute.
bool SelectExpands
{ get; set }
SELECTEXPANDS
A flag indicating if a parent node expands or collapses
when selected by the user.
bool ShowLines
{ get; set }
SHOWLINES
A flag indicating if nodes are displayed connected by
lines.
bool ShowPlus
{ get; set }
SHOWPLUS
A flag indicating if the TreeView displays plus and minus
icons to expand and collapse expandable nodes. When ShowPlus is set to false,
selecting the node will automatically expand the node.
bool ShowToolTip
{ get; set }
SHOWTOOLTIP
Sets
or retrieves a System.Boolean that indicates whether to show a default
ToolTip for each child node.
string SystemImagesPath
{ get; set }
SYSTEMIMAGESPATH
The path to the web server directory that contains
supporting tree images (lines, plus and minus signs, etc).
string Target
{ get; set }
TARGET
The name of the window or frame to which navigation events
are targeted.
string ToolTip
{ get; set }
string TreeNodeSrc
{ get; set }
TREENODESRC
Sets
or retrieves a value that indicates the URL of an Extensible Markup Language
(XML) file, System.String, or XML data island containing TreeNode elements.
TreeNodeTypesCollection TreeNodeTypes
{ get }
N/A
A
collection of TreeNodeType objects that are in the TreeView.
string TreeNodeTypeSrc
{ get; set }
TREENODETYPESRC
The URL to an XML file containing TreeNodeType elements
defining common node properties.
string TreeNodeXsltSrc
{ get; set }
TREENODEXSLTSRC
The URL to an XSLT file containing the transform the source
data into a hierarchy of <treenode> elements.
System.Web.UI.WebControls.Unit Width
{ get; set }
WIDTH
The width of the control. The WIDTH attribute takes all
parameter formats recognized by HTML, e.g. pixel, percentage, etc.
System.Web.UI.WebControls.Unit Height
{ get; set }
HEIGHT
The width of the control. The HEIGHT attribute takes all
parameter formats recognized by HTML, e.g. pixel, percentage, etc.
bool Visible
{ get; set }
VISIBLE
A flag controlling visibility of the control. Excludes the
control from the rendered page when set to false.
bool EnableViewState
{ get; set }
ENABLEVIEWSTATE
string CssClass
{ get; set }
CSSCLASS
bool Enabled
{ get; set }
ENABLED
A flag enabling and disabling the TreeView. Navigating
through a disabled TreeView does not fire any events.
System.Drawing.Color BackColor
{ get; set }
BACKCOLOR
The Background color of the TreeView control.
System.Drawing.Color BorderColor
{ get; set }
BORDERCOLOR
The border color of the TreeView control.
System.Web.UI.WebControls.BorderStyle BorderStyle
{ get; set }
BORDERSTYLE
The style of the TreeView control border. The styles are
defined in the BorderStyle enumeration. Possible values are:
The border width of the TreeView control’s border. The
BORDERWIDTH attribute requires parameters in pixels.
To see the transformation work we can
change the FillTree() method from the example above to build the tree by
binding to XML data instead of parsing the data with an XmlDocument object. We
assign the XML document programmatically to the TreeNodeSrc property of the
TreeView object, since we retrieve the XML data from SQL Server and not from a
file. Otherwise we could associate the data source and the stylesheet source directly
on the <treeview> tag. In contrast to the Xml Web Control, there is no
disadvantage to assigning the XML data from a string compared to assigning from
a file since the TreeView does not cache data or transformations from either
source. The revised FillTree() method is a lot shorter because the logic to
build the tree is now encapsulated in the XSL transformation.
private void FillTree( string xmlOrders )
{
TreeView1.TreeNodeSrc =
xmlOrders;
TreeView1.TreeNodeXsltSrc="OrderToTree.xslt";
TreeView1.DataBind(); //
necessary to make the nodes show up
}
The new FillTree() method only consists of three generic
lines: We pass the data to the control, we point the control to the
transformation file and we call a method called DataBind(). We need to call that
method to let the TreeView do all the work we did before in FillTree(): apply
the stylesheet to the XML data and then parse the resulting XML document to
populate the TreeNodes collection.
The custom logic to build the tree is stored in the XSL
transformation. That is a much better place than the compiled code to because
it is easier to modify. This saves time during development and does not require
a .NET programmer to customize the look and feel of the Tree View. You can
leave that work up to the visuals department because they can tune the Tree
View without recompiling the code for your web site. The cost for this
flexibility is the added processing required to transform the XML data into the
generic format. One way to reduce this cost is to handle the transformation
yourself and cache the transformed XML using the caching support built into
ASP.NET.
Table 17.3: TODO: TreeView methods
Method
Description
void
DataBind()
Binds
the data to the TreeNode or the TreeView whether the TreeNode
has been expanded or not.
TreeNode
GetNodeFromIndex( string index )
Returns
the TreeNode object at the specified index.
