Here I have created sample that will help you out.
and Get the the Themes Folder(Used for CSS) from below link
https://github.com/vakata/jstree/tree/master/dist
Index.aspx(View)
<div>
<style type="text/css">
html
{
margin: 0;
padding: 0;
font-size: 62.5%;
}
body
{
max-width: 800px;
min-width: 300px;
margin: 0 auto;
padding: 20px 10px;
font-size: 14px;
font-size: 1.4em;
}
h1
{
font-size: 1.8em;
}
.demo
{
overflow: auto;
border: 1px solid silver;
min-height: 100px;
}
</style>
<link rel="stylesheet" href="themes/default/style.min.css" />
<div id="ajax" class="demo">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$('#ajax').jstree({
'plugins': ["defaults", "checkbox"],
'core': {
'data': {
"themes": {
"responsive": true
},
"url": "Models/TreeData.ashx",
"dataType": "json"
}
}
});
</script>
</div>
TreeController(Controller)
public ActionResult Index()
{
return View();
}
TreeData(HttpHandler)
public class TreeData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string json = GetTreedata();
context.Response.ContentType = "text/json";
context.Response.Write(json);
}
private string GetTreedata()
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[] {
new System.Data.DataColumn("Id"),
new System.Data.DataColumn("Text"),
new System.Data.DataColumn("ParentId")
});
dt.Rows.Add(1, "IT", 0);
dt.Rows.Add(2, "David", 1);
dt.Rows.Add(3, "Jhon", 1);
dt.Rows.Add(4, "HR", 0);
dt.Rows.Add(5, "Kevin", 4);
dt.Rows.Add(6, "Marry", 4);
dt.Rows.Add(7, "Marketing", 0);
dt.Rows.Add(8, "Todd", 7);
dt.Rows.Add(9, "Andrea", 7);
dt.Rows.Add(10, "Adam", 7);
Node root = new Node { id = "root", children = { }, text = "root" };
System.Data.DataView view = new System.Data.DataView(dt);
view.RowFilter = "ParentId=0";
foreach (System.Data.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 System.Web.Script.Serialization.JavaScriptSerializer().Serialize(root));
}
private void AddChildItems(System.Data.DataTable dt, Node parentNode, string ParentId)
{
System.Data.DataView viewItem = new System.Data.DataView(dt);
viewItem.RowFilter = "ParentId=" + ParentId;
foreach (System.Data.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 bool IsReusable
{
get
{
return false;
}
}
}
Node(Model)
public class Node
{
public Node()
{
children = new System.Collections.Generic.List<Node>();
}
public string id { get; set; }
public string text { get; set; }
public System.Collections.Generic.List<Node> children { get; set; }
}
Screenshot