Post
Ask Question

Display Records Using TreeView in ASP.Net C#

This article shows how to show our records in a tree view using ASP.NET C#.

The following is my Data table design.

design view
                                                   Image 1

The following  are the records in my Data Table:

table record
                                                                                    Image 2

Here I have Employees and their SupervisorEmployee relationship.

The following is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>Tree View Example in ASP.NET C#</title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <table cellpadding="4" cellspacing="4" width="50%" align="center" style="background-color: SkyBlue;">  
  11.         <tr>  
  12.             <td align="center" style="font-family: Times New Roman; font-size: 14pt; color: Green;">  
  13.                 <h3>  
  14.                     Team Leader and their Team Employee Information</h3>  
  15.             </td>  
  16.         </tr>  
  17.         <tr>  
  18.             <td style="background: #F5F5F5; padding-left: 30px;">  
  19.                 <asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" NodeIndent="15">  
  20.                     <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />  
  21.                     <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"  
  22.                         NodeSpacing="0px" VerticalPadding="2px"></NodeStyle>  
  23.                     <ParentNodeStyle Font-Bold="False" />  
  24.                     <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"  
  25.                         VerticalPadding="0px" />  
  26.                 </asp:TreeView>  
  27.             </td>  
  28.         </tr>  
  29.     </table>  
  30.     </form>  
  31. </body>  
  32. </html>  
Now, my aspx.cs code:
  1. using System;  
  2. using System.Configuration;  
  3. using System.Data;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Security;  
  7. using System.Web.UI;  
  8. using System.Web.UI.HtmlControls;  
  9. using System.Web.UI.WebControls;  
  10. using System.Web.UI.WebControls.WebParts;  
  11. using System.Xml.Linq;  
  12. using System.Data.SqlClient;  
  13. using System.Configuration;  
  14.   
  15. public partial class _Default : System.Web.UI.Page  
  16. {  
  17.     protected void Page_Load(object sender, EventArgs e)  
  18.     {  
  19.         if (!this.IsPostBack)  
  20.         {  
  21.             DataTable dt = this.GetData("SELECT EmployeeCode, EmployeeName FROM Employee Where EmployeeSupervisorCode=0");  
  22.             this.PopulateTreeView(dt, 0, null);  
  23.         }  
  24.     }  
  25.   
  26.     private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode)  
  27.     {  
  28.         foreach (DataRow row in dtParent.Rows)  
  29.         {  
  30.             TreeNode child = new TreeNode  
  31.             {  
  32.                 Text = row["EmployeeName"].ToString(),  
  33.                 Value = row["EmployeeCode"].ToString()  
  34.             };  
  35.             if (parentId == 0)  
  36.             {  
  37.                 TreeView1.Nodes.Add(child);  
  38.                 DataTable dtChild = this.GetData("SELECT EmployeeCode, (EmployeeName+ ', '+ Experience + ', '+ Address) As EmployeeName FROM Employee WHERE EmployeeSupervisorCode = " + child.Value);  
  39.                 PopulateTreeView(dtChild, int.Parse(child.Value), child);  
  40.             }  
  41.             else  
  42.             {  
  43.                 treeNode.ChildNodes.Add(child);  
  44.             }  
  45.         }  
  46.     }  
  47.   
  48.     private DataTable GetData(string query)  
  49.     {  
  50.         DataTable dt = new DataTable();  
  51.         string constr = @"Server=MyPC\SqlServer2k8;database=Test;Integrated Security=true;";  
  52.         using (SqlConnection con = new SqlConnection(constr))  
  53.         {  
  54.             using (SqlCommand cmd = new SqlCommand(query))  
  55.             {  
  56.                 using (SqlDataAdapter sda = new SqlDataAdapter())  
  57.                 {  
  58.                     cmd.CommandType = CommandType.Text;  
  59.                     cmd.Connection = con;  
  60.                     sda.SelectCommand = cmd;  
  61.                     sda.Fill(dt);  
  62.                 }  
  63.             }  
  64.             return dt;  
  65.         }  
  66.     }  
  67. }  
Now, run the application:

tree view example
                                                                           Image 3


Similar Articles