How To Use TreeView in ASP

TreeView is an ASP.NET server control that displays hierarchical data in a tree structure. It can be bound to data sources like XML or site maps. The control contains nodes that can be parent, child, or leaf nodes. Properties like Text and Value contain node data. Events fire when nodes are selected or expanded/collapsed. Checkboxes can be added to nodes to allow multi-select. Styles customize node appearance.

Uploaded by

abhinav

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

82 views

How To Use TreeView in ASP

Uploaded by

abhinav

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 5

3/9/2015

HowtouseTreeViewinasp.net

2900+asp.netc#examples

asp.netc#tutorialsandexamplescodeforwebdevelopers

UseKeyboard<>Arrow(LeftRight)togonextpreviouspost

HowtouseTreeViewinasp.net
TreeViewServerControl

TreeViewisanasp.netwebservercontrol.treeviewdisplay
hierarchicaldatasuchasatableofcontentsorfiledirectory,ina
treestructure.treeviewcontrolismadeupofnodes.wecandisplay
staticdataintreeviewbycreatingacollectionsofTreeNodeelements
aschildrenoftreeview.
wecanbindtreeviewtoadatasorcesuchasXmlDataSourceand
SiteMapDataSource.treeviewcanalsobeboundtoanXmlDocumentobject
oraDataSetobject.
treeviewnodetypesareparentnode,childnode,leafnodeandroot
node.parentnodecontainsothernode.childnodeiscontainedby
anothernodeandleafnodehavenochildrennode.rootnodeisnot
containedbyanyothernode.
.

nodehastwopropertiesTextandValue.textpropertyvaluedisplayin
thebrowserandthevaluepropertyishiddeninbrowserandstoreany
additionaldataaboutnode.anodecanhaveonemodeselectionmodeor
navigationmode.selectionmodeisdefault.NavigateUrlpropertyused
innavigationmode.
wecancustomizethetreeviewappearance.wecanapplycssorinline
styles.treeviewcanbedesignbythefollowingnodestyles
HoverNodeStyle,LeafNodeStyle,NodeStyle,ParentNodeStyle,
RootNodeStyleandSelectedNodeStyle.treeviewalsohavebasicdesign
propertiessuchasBackColor,ForeColor,BorderStyle,BorderColor,
BorderWidth,Width,HeightCssClass,EnableTheming,SkinID,
ExpandDepth,ImageSetetc.
wecancustomizeimagesthataredisplayedintreeviewbyusingthe
followingpropertiesCollapseImageUrl,ExpandImageUrl,
LineImagesFolderandNoExpandImageUrl.

treviewcontrolprovidemanyeventssuchasTreeNodeCheckChanged,
SelectedNodeChanged,TreeNodeExpanded,TreeNodeCollapsed,
TreeNodePopulateandTreeNodeDataBound.
whenuserclickanode,itcaneitherraiseaselectioneventvia
postback.oritgotoanotherpageifNavigateUrlpropertyisset.if
NavigateUrlpropertyisnotset,thennodeclickingraise
SelectedNodeChangedevent.
thefollowingexamplesourcecodesdescribesyoutolearnmoreabout
treeviewcontrol.
B U Y AN EB O O K FR O M B LO G G ER

Asp Ne tC ontrols.xm l
viewplaincode

NextExample

<?xmlversion="1.0"encoding="utf8"?>
<ToolBox>
<ItemName="StandardToolboxControls">
<OptionControl="AdRotator"/>
<OptionControl="BulletedList"/>
<OptionControl="CheckBox"/>
<OptionControl="FileUpload"/>
<OptionControl="MultiView"/>
</Item>
<ItemName="DataToolboxControls">
<OptionControl="ListView"/>
<OptionControl="GridView"/>

http://aspnetexample.blogspot.in/2008/10/treeviewexamplehowtousetreeview.html

ASP.NETC#EXAMPLES
EBOOK
$5
Youremailtoreceiveebook

Pleaseallowmefewhourstoemailyourebook.
AUTHOR ON GOOGLE PLUS

1/5

3/9/2015

HowtouseTreeViewinasp.net

<OptionControl="LinqDataSource"/>
<OptionControl="XmlDataSource"/>
</Item>
<ItemName="ValidationToolboxControls">
<OptionControl="CompareValidator"/>
<OptionControl="CustomValidator"/>
</Item>
<ItemName="NavigationToolboxControls">
<OptionControl="Menu"/>
<OptionControl="SiteMapPath"/>
<OptionControl="TreeView"/>
</Item>
</ToolBox>

Saiful Alam
Follow
593 followers

NowcreateaWebFormnameTreeView.aspx.ThenaddanXmlDataSource
ControlandaTreeViewControl.ForXmlDataSourceControl'sDataFile
usestheAspNetControls.xmlfileandforTreeViewControl's
DataSourceIDusestheXmlDataSourceControl'sID.Thenusesthe
asp:TreeNodeBindingforbindXmlfile'sdata.Hereisthesourcecode
ofTreeView.aspxfile.
Tre e Vi e w.aspx
viewplaincode

NextExample

<%@PageLanguage="C#"%>

<!DOCTYPEhtmlPUBLIC"
//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1
transitional.dtd">

<scriptrunat="server">

</script>

http://aspnetexample.blogspot.in/2008/10/treeviewexamplehowtousetreeview.html

2/5

3/9/2015

HowtouseTreeViewinasp.net

CheckBoxinTreeView
treeviewhaveacustomrenderingfeaturethatisitcandisplaya
checkboxnexttoanode.checkboxrenderbetweennodetextandimage.
todisplayacheckboxonnodeyouneedtousetreeviewShowCheckBoxes
property.usercancanselectmultiplenodesatonceusingcheckbox.
viewplaincode

NextExample

<%@PageLanguage="C#"%>

<!DOCTYPEhtmlPUBLIC"
//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1
transitional.dtd">

<scriptrunat="server">
protectedvoidButton1_Click(objectsender,System.EventArgse){
Label1.Text="Yourfavoritecontrol(s)<br/>";
foreach(TreeNodenodeinTreeView1.CheckedNodes){
Label1.Text+=node.Text+"<br/>";
}
}
</script>

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>TreeViewControlSimpleExample</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:XmlDataSourceID="XmlDataSource1"runat="server"DataFile="~/App_Data/Asp
NetControls.xml">
</asp:XmlDataSource>
<asp:LabelID="Label1"runat="server"Font
Size="Medium"ForeColor="Crimson"/>
<asp:LabelID="Label2"runat="server"Text="Selectfavoritecontrol(s)">
</asp:Label>
<br/>
<asp:TreeViewID="TreeView1"runat="server"DataSourceID="XmlDataSource1"Show
CheckBoxes="Leaf">
<DataBindings>
<asp:TreeNodeBindingDataMember="ToolBox"Text="Asp.NetToolBox"/>
<asp:TreeNodeBindingDataMember="Item"TextField="Name"/>
<asp:TreeNodeBindingDataMember="Option"TextField="Control"/>
</DataBindings>
</asp:TreeView>
<br/>
<asp:ButtonID="Button1"runat="server"Text="ShowResult"OnClick="Button1_Cl
ick"/>
</div>
</form>
</body>
</html>