how to load treeview in asp.net using javascript with no aspx.cs file.

Hi John,

try this code,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js">script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetTreeData",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var nodes = JSON.parse(response.d).nodes;
$('#dvTree').treeview({
data: JSON.stringify(nodes)
});
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
script>
<div id="dvTree">div>

C#:

[WebMethod]
public static string GetTreeData()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Text"), new DataColumn("ParentId") });
dt.Rows.Add(1, "IT", 0);
dt.Rows.Add(2, "HR", 0);
dt.Rows.Add(3, "Marketing", 0);
dt.Rows.Add(4, "David", 1);
dt.Rows.Add(5, "Jhon", 1);
dt.Rows.Add(6, "Kevin", 2);
dt.Rows.Add(7, "Marry", 2);
dt.Rows.Add(8, "Robert", 3);
dt.Rows.Add(9, "Andrea", 6);
dt.Rows.Add(10, "Adam", 8);
dt.Rows.Add(11, "Dharmendra", 4);
dt.Rows.Add(12, "Ajeet", 5);
Node nodes = new Node { text = "Department" };
DataView view = new DataView(dt);
view.RowFilter = "ParentId=0";
foreach (DataRowView kvp in view)
{
string parentId = kvp["Id"].ToString();
Node node = new Node { text = kvp["text"].ToString() };
nodes.nodes.Add(node);
AddChildItems(dt, node, parentId);
}
return (new JavaScriptSerializer()).Serialize(nodes).Replace(",\"nodes\":[]", "");
}
private static void AddChildItems(DataTable dt, Node parentNode, string ParentId)
{
DataView viewItem = new DataView(dt);
viewItem.RowFilter = "ParentId=" + ParentId;
foreach (DataRowView childView in viewItem)
{
Node node = new Node { text = childView["text"].ToString() };
parentNode.nodes.Add(node);
string pId = childView["Id"].ToString();
AddChildItems(dt, node, pId);
}
}
public class Node
{
public Node()
{
nodes = new List<Node>();
}
public string id { get; set; }
public string text { get; set; }
public string icon { get; set; }
public List<Node> nodes { get; set; }
}

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Hi John,
try this code,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js">script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTreeData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var nodes = JSON.parse(response.d).nodes;
                $('#dvTree').treeview({
                    data: JSON.stringify(nodes)
                });
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });
script>
<div id="dvTree">div>
C#:
[WebMethod]
public static string GetTreeData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Text"), new DataColumn("ParentId") });
    dt.Rows.Add(1, "IT", 0);
    dt.Rows.Add(2, "HR", 0);
    dt.Rows.Add(3, "Marketing", 0);
    dt.Rows.Add(4, "David", 1);
    dt.Rows.Add(5, "Jhon", 1);
    dt.Rows.Add(6, "Kevin", 2);
    dt.Rows.Add(7, "Marry", 2);
    dt.Rows.Add(8, "Robert", 3);
    dt.Rows.Add(9, "Andrea", 6);
    dt.Rows.Add(10, "Adam", 8);
    dt.Rows.Add(11, "Dharmendra", 4);
    dt.Rows.Add(12, "Ajeet", 5);

    Node nodes = new Node { text = "Department" };
    DataView view = new DataView(dt);
    view.RowFilter = "ParentId=0";
    foreach (DataRowView kvp in view)
    {
        string parentId = kvp["Id"].ToString();
        Node node = new Node { text = kvp["text"].ToString() };
        nodes.nodes.Add(node);
        AddChildItems(dt, node, parentId);
    }
    return (new JavaScriptSerializer()).Serialize(nodes).Replace(",\"nodes\":[]", "");
}

private static void AddChildItems(DataTable dt, Node parentNode, string ParentId)
{
    DataView viewItem = new DataView(dt);
    viewItem.RowFilter = "ParentId=" + ParentId;
    foreach (DataRowView childView in viewItem)
    {
        Node node = new Node { text = childView["text"].ToString() };
        parentNode.nodes.Add(node);
        string pId = childView["Id"].ToString();
        AddChildItems(dt, node, pId);
    }
}

public class Node
{
    public Node()
    {
        nodes = new List<Node>();
    }
    public string id { get; set; }
    public string text { get; set; }
    public string icon { get; set; }
    public List<Node> nodes { get; set; }
}
0
Sachin Singh5y ago
just use javascript then, i am considering your data contains parent and children
       "btnTree">Draw Tree