How to make tree view dynamically in asp.net

By Unknown 3/27/2013 Leave a Comment
Here I am giving you complete explanation of creating Tree view dynamically using rad telerik tool kit in asp.net. We are creating tree view using recurrsion  or we can say parent child relationship.

Database stracture for creating menu is given over here with level wise.


Design page for tree view is like:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
       
    </div>
                       
                       
    <telerik:RadTreeView ID="RadTreeView1" runat="server" >
   
    <DataBindings>
                        <telerik:RadTreeNodeBinding />
                    </DataBindings>
    </telerik:RadTreeView>          

    </form>
</body>
</html>
class file coding is:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

using System.Xml;
using System.Data.SqlClient;
using Telerik.Web.UI;
public partial class Default5 : System.Web.UI.Page
{
    SqlConnection cn = new SqlConnection(@"Data Source=DEVANG-PC\SQLEXPRESS;Initial Catalog=Tree_View_Db;User ID=sa;Password=sa123");
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            fill_TreeEmployee();
        }
    }

    public void fill_TreeEmployee()
    {
        cn.Open();
        SqlCommand cmd = new SqlCommand();
        DataTable dt = new DataTable();
        SqlDataAdapter da = new SqlDataAdapter();
        cmd.CommandText = "Select * from Tree_Detail where Tree_Level=0";
        cmd.Connection = cn;
        da.SelectCommand = cmd;
        da.Fill(dt);
        cn.Close();
       
        foreach (DataRow dr in dt.Rows)
        {
            RadTreeNode tnParent = new RadTreeNode();
           
            tnParent.Text = dr["Tree_Name"].ToString();
            tnParent.Value = dr["Tree_id"].ToString();
            RadTreeView1.Nodes.Add(tnParent);
            FillChild(tnParent,tnParent.Value);
           
        }
    }
    public void FillChild(RadTreeNode parent, string ParentValue)
    {
        DataTable dt1 = new DataTable();
        SqlCommand cmd1 = new SqlCommand();
        SqlDataAdapter da1 = new SqlDataAdapter();
        int parent_value = Convert.ToInt32(ParentValue);
        cmd1.CommandText="SELECT * FROM Tree_Detail WHERE Tree_Level='"+parent_value+"'";
        cmd1.Connection = cn;
        da1.SelectCommand = cmd1;
        da1.Fill(dt1);
        foreach (DataRow dr1 in dt1.Rows)
        {
            RadTreeNode child = new RadTreeNode();
            child.Text = dr1["Tree_Name"].ToString();
            child.Value = dr1["Tree_id"].ToString();
            child.Expanded = false;
            parent.Nodes.Add(child);
         
            FillChild(child, child.Value);  //for recursion...
        }
    }
}

Here i used rad telerik toolkit control but you can also use your asp.net tree view same as rad ajax toolkit tree view...

Output:



0 comments:

Post a Comment