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:

Comments

Post a Comment