Hi rani,
Check this example. Now please take its reference and correct your code.
For this example i have used angularTreeview directive.
The angularTreeview Directive can be downloaded from GitHub using the following link.
https://github.com/eu81273/angular.treeview
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div[data-angular-treeview]
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: Tahoma;
font-size: 13px;
color: #555;
text-decoration: none;
}
div[data-tree-model] ul
{
margin: 0;
padding: 0;
list-style: none;
border: none;
overflow: hidden;
}
div[data-tree-model] li
{
position: relative;
padding: 0 0 0 20px;
line-height: 20px;
}
div[data-tree-model] li .expanded
{
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD");
background-repeat: no-repeat;
}
div[data-tree-model] li .collapsed
{
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB");
background-repeat: no-repeat;
}
div[data-tree-model] li .normal
{
padding: 1px 10px;
background-image: url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA");
background-repeat: no-repeat;
}
div[data-tree-model] li i, div[data-tree-model] li span
{
cursor: pointer;
}
div[data-tree-model] li .selected
{
background-color: #aaddff;
font-weight: bold;
padding: 1px 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="angular.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
var myApp = angular.module('MyApp', ['angularTreeview']);
myApp.controller('MyController', function ($scope, $http) {
$http.post('Default.aspx/GetVehicles', { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.List = JSON.parse(response.data.d).children;
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="MyApp" ng-controller="MyController">
<div data-angular-treeview="true" data-tree-id="mytree" data-tree-model="List" data-node-id="id"
data-node-label="text" data-node-children="children">
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Collections.Generic;
using System.Data;
using System.Web.Script.Serialization;
using System.Web.Services;
VB.Net
Imports System.Collections.Generic
Imports System.Data
Imports System.Web.Script.Serialization
Imports System.Web.Services
Code
C#
private 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, "Cars", 0);
dt.Rows.Add(2, "Bikes", 0);
dt.Rows.Add(3, "Alto", 1);
dt.Rows.Add(4, "WagonR", 1);
dt.Rows.Add(5, "Scorpio", 1);
dt.Rows.Add(6, "Duster", 1);
dt.Rows.Add(7, "Discover", 2);
dt.Rows.Add(8, "Avenger", 2);
dt.Rows.Add(9, "Unicorn", 2);
dt.Rows.Add(10, "Karizma", 2);
dt.Rows.Add(11, "kia1", 4);
dt.Rows.Add(12, "kia2", 4);
Node root = new Node { id = "root", children = { }, text = "root" };
DataView view = new DataView(dt);
view.RowFilter = "ParentId=0";
foreach (DataRowView kvp in view)
{
string parentId = kvp["Id"].ToString();
Node node = new Node { id = kvp["Id"].ToString(), text = kvp["text"].ToString() };
root.children.Add(node);
AddChildItems(dt, node, parentId);
}
return (new JavaScriptSerializer().Serialize(root));
}
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 { id = childView["Id"].ToString(), text = childView["text"].ToString() };
parentNode.children.Add(node);
string pId = childView["Id"].ToString();
AddChildItems(dt, node, pId);
}
}
public class Node
{
public Node()
{
children = new List<Node>();
}
public string id { get; set; }
public string text { get; set; }
public List<Node> children { get; set; }
}
[WebMethod]
public static string GetVehicles()
{
return GetTreedata();
}
VB.Net
Private Shared Function GetTreedata() As String
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Text"), New DataColumn("ParentId")})
dt.Rows.Add(1, "Cars", 0)
dt.Rows.Add(2, "Bikes", 0)
dt.Rows.Add(3, "Alto", 1)
dt.Rows.Add(4, "WagonR", 1)
dt.Rows.Add(5, "Scorpio", 1)
dt.Rows.Add(6, "Duster", 1)
dt.Rows.Add(7, "Discover", 2)
dt.Rows.Add(8, "Avenger", 2)
dt.Rows.Add(9, "Unicorn", 2)
dt.Rows.Add(10, "Karizma", 2)
dt.Rows.Add(11, "kia1", 4)
dt.Rows.Add(12, "kia2", 4)
Dim root As Node = New Node With {.id = "root", .text = "root"}
Dim view As DataView = New DataView(dt)
view.RowFilter = "ParentId=0"
For Each kvp As DataRowView In view
Dim parentId As String = kvp("Id").ToString()
Dim node As Node = New Node With {
.id = kvp("Id").ToString(),
.text = kvp("text").ToString()
}
root.children.Add(node)
AddChildItems(dt, node, parentId)
Next
Return (New JavaScriptSerializer().Serialize(root))
End Function
Private Shared Sub AddChildItems(ByVal dt As DataTable, ByVal parentNode As Node, ByVal ParentId As String)
Dim viewItem As DataView = New DataView(dt)
viewItem.RowFilter = "ParentId=" & ParentId
For Each childView As DataRowView In viewItem
Dim node As Node = New Node With {
.id = childView("Id").ToString(),
.text = childView("text").ToString()
}
parentNode.children.Add(node)
Dim pId As String = childView("Id").ToString()
AddChildItems(dt, node, pId)
Next
End Sub
Public Class Node
Public Sub New()
children = New List(Of Node)()
End Sub
Public Property id As String
Public Property text As String
Public Property children As List(Of Node)
End Class
<WebMethod()>
Public Shared Function GetVehicles() As String
Return GetTreedata()
End Function
Screenshot
