ASP.net How to use Treeview Code Example

ASP.net How to use Treeview Code Example:

TreeView Web control is useful to display hierarchical data in a tree structure. The content for the TreeView control can be specified directly in the control or the TreeView control can be bound to
1. XML file
2. web.sitemap file
3. Database table

A TreeView is a collection of TreeNode objects.

To configure the look and feel of the TreeView control, the following styles can be used.
1. HoverNodeStyle
2. LeafNodeStyle
3. RootNodeStyle
4. SelectedNodeStyle etc.

we would configure the TreeView control as shown below. Notice that we have set Targetattribute of TreeNode to _blank. This ensures that the target page is opened in a new window.
<asp:TreeView ID="TreeView1" runat="server">
    <Nodes>
        <asp:TreeNode Text="Home" NavigateUrl="~/Home.aspx" Target="_blank" />
        <asp:TreeNode Text="Employee" NavigateUrl="~/Employee.aspx" Target="_blank">
            <asp:TreeNode Text="Upload Resume" NavigateUrl="~/UploadResume.aspx" Target="_blank"/>
            <asp:TreeNode Text="Edit Resume" NavigateUrl="~/EditResume.aspx" Target="_blank"/>
            <asp:TreeNode Text="View Resume" NavigateUrl="~/ViewResume.aspx" Target="_blank"/>
        </asp:TreeNode>
        <asp:TreeNode Text="Employer" NavigateUrl="~/Employer.aspx" Target="_blank">
            <asp:TreeNode Text="Upload Job" NavigateUrl="~/UploadJob.aspx" Target="_blank"/>
            <asp:TreeNode Text="Edit Job" NavigateUrl="~/EditJob.aspx" Target="_blank"/>
            <asp:TreeNode Text="View Job" NavigateUrl="~/ViewJob.aspx" Target="_blank"/>
        </asp:TreeNode>
        <asp:TreeNode Text="Admin" NavigateUrl="~/Admin.aspx" Target="_blank">
            <asp:TreeNode Text="Add User" NavigateUrl="~/AddUser.aspx" Target="_blank"/>
            <asp:TreeNode Text="Edit User" NavigateUrl="~/EditUser.aspx" Target="_blank"/>
            <asp:TreeNode Text="View User" NavigateUrl="~/ViewUser.aspx" Target="_blank"/>
        </asp:TreeNode>
    </Nodes>
</asp:TreeView>

Create the required database table using the script below:

Create table tblTreeViewItems

(

ID int identity primary key,

TreeViewText nvarchar(50),

NavigateURL nvarchar(50),

ParentId int references tblTreeViewItems(ID)

)

2. Create a stored procedure that returns data from tblTreeViewItems table.

Create proc spGetTreeViewItems

as

Begin

Select ID, TreeViewText, NavigateURL, ParentId

from tblTreeViewItems

End

3. Drag and drop a treeview control on the webform

4. Copy and paste the following ado.net code in the code-behind file.

protected void Page_Load(object sender, EventArgs e)

{ if (!IsPostBack) { GetTreeViewItems(); }

}

private void GetTreeViewItems()

{ string cs = ConfigurationManager.ConnectionStrings[&­quot;DBCS”].ConnectionString; SqlConnection con = new SqlConnection(cs); SqlDataAdapter da = new SqlDataAdapter(“spGetTreeViewItems&­quot;, con); da.SelectCommand.CommandType = CommandType.StoredProcedure; DataSet ds = new DataSet(); da.Fill(ds); ds.Relations.Add(“ChildRows”, ds.Tables[0].Columns[“ID”], ds.Tables[0].Columns[“ParentId”­;]); foreach (DataRow level1DataRow in ds.Tables[0].Rows) { if (string.IsNullOrEmpty(level1DataRow[&quo­t;ParentId”].ToString())) { TreeNode treeNode = new TreeNode(); treeNode.Text = level1DataRow[“TreeViewText”].­ToString(); treeNode.NavigateUrl = level1DataRow[“NavigateURL”].T­oString(); DataRow[] level2DataRows = level1DataRow.GetChildRows(“ChildRo­ws”); foreach (DataRow level2DataRow in level2DataRows) { TreeNode childTreeNode = new TreeNode(); childTreeNode.Text = level2DataRow[“TreeViewText”].­ToString(); childTreeNode.NavigateUrl = level2DataRow[“NavigateURL”].T­oString(); treeNode.ChildNodes.Add(childTreeNode); } Treeview1.Nodes.Add(treeNode); } }

}

 include the following using declarations.

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

The above code works as expected only with 2 levels of TreeNode objects. If you include a third level, those TreeNodes will not be displayed in the TreeView control. For example, if you execute the following insert sql script. These rows will not be displayed in the TreeView control, we will discuss fixing this in our next video.

Insert into tblTreeViewItems values (‘AAA’, ‘~/AAA.aspx’, 5)

Insert into tblTreeViewItems values (‘BBB’, ‘~/BBB.aspx’, 5)

Asp.net Related Other Post:

• What is MVC model
• Introduction of SQL
• Textbox Asp.net control
• ImageButton control
• Asp.net Button control.
• Literal control in Asp.net
• Mvc version, and introduction
• Asp.net Ajax Json Introduction
• Image size before Uploading.
• Asp.net CheckBoxList using jQuery.
• Cropping image using jQuery in asp.net
• Asp.net Imagebutton control example
• C# Variables,How to declare and use in C#:
• JQuery Change Div Background Color Randomly
• Displaying the textbox value in javascript Messagebox
• Get selected radio button values using JQuery.
• How do you do html text encodes using JavaScript
• Limit Number of Characters in a TextArea using jQuery
• jquery disable or Enable submit button after validation
• Enable Disable Submit Button using jQuery
• JQuery UI Datepicker (Calendar) with asp.net textbox
• Get current datetime in jquery and javaScript.
• jQuery modal dialog with postback  in asp.net
• Example of C# for Bind Data to asp.net Textbox inside gridview control
• Bind Data to asp.net textbox control in inside of gridview Using C# Example