ASP.NET TreeView - XML Tutorial



XML File Format

You can access the sample XML from Obout Downloaded Suite's folder 
\\ASPTreeView\xmldemo.xml

Open XML file in Notepad instead of opening in browser to see the actual XML. 
You can see the XML file in the browse, but note that browsers show XML file in 
modified form for better presentation.You can see the actual XML only in Notepad 
(not in the browsers).

Specify your complete tree structure between the <root></root> tag. 
After that, create the tag structure the same as your tree structure. The tag 
name will be used as the node ID in the tree structure. Define all child nodes 
between their parent tag nodes. 

Please go through with the example to understand more.


<XML type='text/xml'>
    <root>
        <N1 html='XML Methods' img='Folder.gif' exp='True' url=''>
            <N11 html=From File' img='Folder.gif' exp='True' url='' />
            <N12 html='From String' img='Folder.gif' exp='True' url='' />
        </N1>
        <N2 html='XML Methods' img='Folder.gif' exp='True' url=''>
            <N21…/>
            <N22…/>
        </N2>
    …
    </root>
</XML>



N1 and N2 nodes are under the root node. N11 and N12 nodes are the child nodes
of N1. So they are declared between the <N1> </N1> tag. To add child 
nodes to the N11 node, declare the XML markup of the children between the 
<N11></N11> tags.

Each XML node should have these attributes:
 - html (the text/html of the node)
 - img (the icon of the node),
 - exp (boolean - set it to 'true' to make the node appear expanded)
 - url (url to the page from where the children of the current node will be loaded dynamically) 





Difference between XML_LoadFromFile and XML_LoadFromString

XML_LoadFromFile method reads the data from XML file whereas XML_LoadFromString 
creates the tree from a string containing the XML markup. You need to generate the string
at runtime, from your C#/VB code. The advantage of the XML_LoadFromFile method 
is that it keeps XML markup separated from your code.





Special characters in the HTML attribute of the nodes

The XML standard has a set of special characters that cannot be used inside the values of  
the attributes of an XML tag. These characters are : < > & " '
If you need to use these characters you need to replace them with the so-called "escape" 
characters.The escape characters are:

&lt; 
The less-than character (<) starts element markup (the first character of a 
start-tag or an end-tag).

&amp;
The ampersand character (&) starts entity markup (the first character of a 
character entity reference).

&gt;
The greater-than character (>) ends a start-tag or an end-tag.

&quot;
The double-quote character (") can be symbolised with this character entity
reference when you need to embed a double-quote inside a string which is already 
double-quoted.

&#39; 
The apostrophe or single-quote character (') can be symbolised with this character
entity reference when you need to embed a single-quote or apostrophe inside a string 
which is already single-quoted.





Create the String for the XML_LoadFromString method

While generating the XML string you need to pay attention to the special characters explained above.
For example to generate a string containing the following XML markup:


<XML type='text/xml'>
    <root>
        <N1 html='XML Methods' img='Folder.gif' exp='True' url=''>
            <N11 html='From File' img='Folder.gif' exp='True' url='' />
            <N12 html='From String' img='Folder.gif' exp='True' url='' />
        </N1>
    </root>
</XML> 

Use the following C# code:

string varXMLStr = "<XML type='text/xml'>";
varXMLStr += "<root>" ;
varXMLStr += "<N1 html='XML Methods' img='Folder.gif' exp='True' url=''>";
varXMLStr += "<N11 html='From File' img='Folder.gif' exp='True' url='' />";
varXMLStr += "<N12 html='From String' img='Folder.gif' exp='True' url='' />";
varXMLStr += "</N1>";
varXMLStr += "</root>";
varXMLStr += "</XML>";
 





XML_LoadFromFile method

Get the absolute path where your XML file resides, using the
"Request.MapPath()" method and pass the path to the  XML_LoadFromFile
method. 

For example, if your XML file is in same folder as the aspx file, you can 
use this C# code: 

//C# Code 

void Page_Load(object sender, EventArgs e) 
{ 
obout_ASPTreeView_2_NET.Tree oTree = new obout_ASPTreeView_2_NET.Tree(); 
oTree.id = "tree_"; 
oTree.AddRootNode("root", true, "oInboxF.gif"); 
//XML file is in same folder where aspx file reside 
oTree.XML_LoadFromFile(Request.MapPath("xmldemo.xml")); 
oTree.FolderIcons = "tree2/icons"; 
oTree.FolderScript = "tree2/script"; 
oTree.FolderStyle = "tree2/style/Classic"; 
TreeView.Text = oTree.HTML(); 
}  





Get the structure of the tree in XML format

You can use the XML_WriteToString method to get the structure of the tree as 
XML markup. The string returned by this method can be stored in a database.

varStr = oTree.XML_WriteToString 





Tree Performance

Microsoft said that XML performance degrades when XML file size is over 150 KB. 
We recommend to use database instead of XML for large trees. When file size is 
less than 150 KB, the tree is lightning fast.

How to populate from database




obout.com
obout.com Home
News
TreeView Home
TreeView Home
Download
Site Map
Examples 
Styles
Classic
Classic
Dynamic Loading
No Icons
Black
Black No Icons
Background image
Premiere New
black
blue
green
red
violet
yellow
Explorer
Gray
Help
HelpPlus
MSDN
TMenu
TMenu (small icons)
Vista New
Web
White
XPBlue
Win2003
Right To Left
Features
Drag and drop - 18
Drag-n-Drop
Custom
Multi-node
Dragging with children
Drop in textboxes
External D'n'D
Move nodes 1
Renumber nodes
Auto Scrolling
Copy / Move nodes
D'n'd and Dynamic Loading
Drop in listboxes
Drop in listboxes 2
Restrict Levels
D'n'D with various options
Disable dropping in two trees
Not-allowed Icon New
Sort after D'n'D New
Dynamic loading - 6
Web style
MSDN style
Deep tree
Reload subtrees
Loading trees partially
Virtual Scrolling New
Add/remove nodes - 4
Add/remove on client-side
Alphabetical order
Add to dynamic subtrees
Remove all children
Edit nodes - 4
Edit nodes
Nodes with Checkboxes
Sort after Edit New
Select nodes - 3
Find selected node
Select multiple nodes
Highlight parent
Layout - 2
Width, height and scrollbars
Root node
TreeView state - 3
Dynamic
Keep expanded
Keep collapsed
File system - 3
Show file system
File system loading
File system manager
Additional data for each node - 3
Details
On client side
Image viewer
Expand/collapse nodes - 2
By level
Single folder
Multiple trees - 4
Two Trees
Two Trees custom
Two Trees enhancement
Move Nodes BTWN Trees New
Different Styles New
Validation - 2
D-n-d on server
Edit on server
Integration - 14
With a context menu
Attach Easy Menu
Attach menu on-demand
Attach to dynamic nodes
Attach menu to icons
Change icons
With Flyout
With Splitter
MS AJAX
With checkboxes
Dynamic checkboxes
With a Combobox
With modal dialog
Outlook Slide Menu
With Tab Strip
Build from SiteMap
Customization - 7
Icons for treeview
Aligned columns
CSS Tutorial
Hover node effect
Multi-Level Slide Menu
Select on Collapse
From Dennis
From/To XML file
Keyboard navigation
Search nodes
Client-side events
Knowledge Base - 1
Knowledge Base
Documentation
Method Add
Server-Side
Client-Side
Client-Side Events
XML
Methods
XML Tutorial
Client-Side Tutorial
Tutorial 1
Tutorial 2
Tutorial 3
Tutorial 4
Events
Tutorial
Event handlers
Tutorials
Using the correct path
Improving performance
In a user control
AutoPostBack with various options
Open in Search pane
Move nodes by clicking a button
Postback on node select
Switch icons