How to create treeview from database in asp.nt

Description:-

In this Example we will Show to Create Tree view from Data Base. Tree view is Nothing but graphical control element that presents a hierarchical view of information. Each item can have a number of sub items. This is often visualized by indentation in a list.

Web.config:-
To create Tree-view Create Connection in Web.Config File so we Don't Have to Repeat Each time in Code behind File.

 <connectionStrings>
    <add connectionString="Data Source='YourConnectionString';User ID='Your UserName';Password='Your PassWord'" name="DBCS" providerName="System.Data.SqlClient" />
  </connectionStrings>

Default.aspx:-
Now Create Web Page and Drag Tree view control in Page and Give Some Property for Design Tree view in Web Page.

   <div>
        <h3>
            Vehicle Details</h3>
        <hr />
        <asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" NodeIndent="15">
            <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
            <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
                NodeSpacing="0px" VerticalPadding="2px"></NodeStyle>
            <ParentNodeStyle Font-Bold="False" />
            <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
                VerticalPadding="0px" />
        </asp:TreeView>
   </div>

Create tables:-

VehicleTypes Table

CREATE TABLE [dbo].[VehicleTypes](
    [Id] [int] NOT NULL,
    [Name] [varchar](50) NOT NULL,
 CONSTRAINT [PK_VehicleTypes] PRIMARY KEY CLUSTERED 
(
    [Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

VehicleSubTypes Table

CREATE TABLE [dbo].[VehicleSubTypes](
    [Id] [int] NOT NULL,
    [Name] [varchar](50) NOT NULL,
    [VehicleTypeId] [int] NOT NULL,
 CONSTRAINT [PK_VehicleSubTypes] PRIMARY KEY CLUSTERED 
(
    [Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

Default.aspx.cs:-

Now create connection and retrieve data from database. create method getdata and call in pageload event and store that data in datatable.

private DataTable GetData(string query)
{
  DataTable dt = new DataTable();
  string constr = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  using (SqlConnection con = new SqlConnection(constr))
  {
    using (SqlCommand cmd = new SqlCommand(query))
    {
      using (SqlDataAdapter sda = new SqlDataAdapter())
      {
        cmd.CommandType = CommandType.Text;
        cmd.Connection = con;
        sda.SelectCommand = cmd;
        sda.Fill(dt);
      }
    }
    return dt;
  }
}

Page_Load() method for Calling getData method in first time When Page Load First Time.

protected void Page_Load(object sender, EventArgs e)
{
  if (!this.IsPostBack)
  {
    DataTable dt = this.GetData("SELECT Id, Name FROM VehicleTypes");
    this.PopulateTreeView(dt, 0, null);
  }
}

Now Create PopulateTreeView Method and Bind retrieve Data in treeView Control and Call in Page_Load Method.

private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode)
{
  foreach (DataRow row in dtParent.Rows)
  {
    TreeNode child = new TreeNode
    {
      Text = row["Name"].ToString(),
      Value = row["Id"].ToString()
    };
    if (parentId == 0)
    {
      TreeView1.Nodes.Add(child);
      DataTable dtChild = this.GetData("SELECT Id, Name FROM VehicleSubTypes WHERE VehicleTypeId = " + child.Value);
      PopulateTreeView(dtChild, int.Parse(child.Value), child);
    }
    else
    {
      treeNode.ChildNodes.Add(child);
    }
  }
}

Output:-

Author : Umesh Patel

Related Posts