ASP.NET - How to use Treeview Control
- TreeView in ASP.NET is a one of Web Server Control as like Menu Control.
- Treeview display hierarchical data such as a table of contents or file directory, in a tree structure. treeview control is made up of nodes. we can display static data in treeview by creating a collections of TreeNode elements as children of treeview.
- We can bind treeview to a data sorce such as (XmlDataSource) and (SiteMapDataSource). treeview can also be bound to an (XmlDocument ) object or a DataSet object.
- Treeview node types are parent node, child node, leaf node and root node. parent node contains other node. child node is contained by another node and leaf node have no children node. root node is not contained by any other node.
- Node has two properties Text and Value. text property value display in the browser and the value property is hidden in browser and store any additional data about node. a node can have one mode selection mode or navigation mode. selection mode is default. NavigateUrl property used in navigation mode.
- We can customize the treeview appearance. we can apply css or inline styles. treeview can be design by the following node styles HoverNodeStyle, LeafNodeStyle, NodeStyle, ParentNodeStyle, RootNodeStyle and SelectedNodeStyle. treeview also have basic design properties such as BackColor, ForeColor, BorderStyle, BorderColor, BorderWidth, Width, Height CssClass, EnableTheming, SkinID, ExpandDepth, ImageSet etc.
- We can customize images that are displayed in treeview by using the following properties CollapseImageUrl, ExpandImageUrl, LineImagesFolder and NoExpandImageUrl.
- When user click a node, it can either raise a selection event via postback. or it go to another page if NavigateUrl property is set. if NavigateUrl property is not set, then node clicking raise SelectedNodeChanged event.
Following example shows its usage
<?xml version="1.0" encoding="utf-8" ?> <ToolBox> <Item Name="Country "> <Option Control="India" /> <Option Control="U.S.A" /> <Option Control="Australia " /> <Option Control="Japan" /> <Option Control="Sri-Lanka" /> </Item> <Item Name="Hobbies"> <Option Control="Sports" /> <Option Control="Reading" /> <Option Control="Solving Puzzle" /> <Option Control="Talking" /> </Item> <Item Name="Name "> <Option Control="Manav Pandya" /> <Option Control="Pandya Manav" /> </Item> <Item Name="Language "> <Option Control="ASP.NET" /> <Option Control="C#" /> <Option Control="JAVA" /> </Item> </ToolBox>
Now Create Webform Treeview_Demo.aspx as shown below
<%@ Page Language="C#" %> <!DOCTYPE html> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>How to use TreeView in asp.net</title> </head> <body style="padding:25px"> <form id="form1" runat="server"> <div> <h2 style="color:MidnightBlue; font-style:italic;"> How to use TreeView </h2> <hr width="450" align="left" color="Gainsboro" /> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/ASPNETControls.xml" > </asp:XmlDataSource> <asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" > <DataBindings> <asp:TreeNodeBinding DataMember="ToolBox" Text="ASP.NET ToolBox" /> <asp:TreeNodeBinding DataMember="Item" TextField="Name" /> <asp:TreeNodeBinding DataMember="Option" TextField="Control" /> </DataBindings> </asp:TreeView> </div> </form> </body> </html
Great we are done .....
Now press CTRL + F5 and here we go , Tree view is completed and you can see all the element placed well
I hope you may like this one ....
basic asp.net mvc tutorials, Free asp.net mvc Tutorials for beginners, mvc, asp.net mvc, .net tutorials, mvc tutorial, mvc tutorials, asp.net mvc tutorials, mvc tutorial, mvc tutorials for Beginners , asp.net mvc Basics, basic mvc, mvc4, mvc5,.net mvc
Posts
