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.
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.
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.
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:-
