ASP.Net: Populate TreeView using DataTable in jQuery

Hi Jilsoft,

Please refer below sample.

Note: For this sample i have used temporary DataTable. For more details refer How to create Temporary Table in ASP.Net using C# and VB.Net.

HTML

<div id="ajax" class="demo">
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<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">
    $(function () {
        $('#ajax').jstree({
            'plugins': ["defaults"],
            'core': {
                'data': {
                    "themes": {
                        "responsive": true
                    },
                    "url": "TreeData.ashx",
                    "dataType": "json"
                }
            }
        });
    });
</script>

Namespaces

C#

using System.Data;
using System.Collections.Generic;

VB.Net

Imports System.Data
Imports System.Collections.Generic

Code

C#

<%@ WebHandler Language="C#" Class="TreeData" %>

using System;
using System.Web;
using System.Data;
using System.Collections.Generic;

public class TreeData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string json = GetTreeData();
        context.Response.ContentType = "text/json";
        context.Response.Write(json);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    private string GetTreeData()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
                            new DataColumn("ParentID"),
                            new DataColumn("ChildName"),
                            new DataColumn("ChildID")
        });
        dt.Rows.Add(1, "English", 0);
        dt.Rows.Add(2, "English 1", 1);
        dt.Rows.Add(3, "English 2", 1);
        dt.Rows.Add(4, "Maths", 0);
        dt.Rows.Add(5, "maths1", 4);
        dt.Rows.Add(6, "maths1.1", 5);

        Node selectItem = new Node { };
        DataView view = new DataView(dt);
        view.RowFilter = "ChildID=0";
        foreach (DataRowView kvp in view)
        {
            string parentId = kvp["ParentID"].ToString();
            Node node = new Node { id = kvp["ParentID"].ToString(), text = kvp["ChildName"].ToString() };
            selectItem.children.Add(node);
            AddChildItems(dt, node, parentId);

        }
        return (new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(selectItem));
    }

    private void AddChildItems(DataTable dt, Node parentNode, string ParentId)
    {
        DataView viewItem = new DataView(dt);
        viewItem.RowFilter = "ChildID=" + ParentId;
        foreach (DataRowView childView in viewItem)
        {
            Node node = new Node { id = childView["ParentID"].ToString(), text = childView["ChildName"].ToString() };
            parentNode.children.Add(node);
            string pId = childView["ParentID"].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; }
    }
}

VB.Net

<%@ WebHandler Language="VB" Class="TreeData" %>

Imports System
Imports System.Web
Imports System.Data
Imports System.Collections.Generic

Public Class TreeData : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim json As String = GetTreeData()
        context.Response.ContentType = "text/json"
        context.Response.Write(json)
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

    Private Function GetTreeData() As String
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("ParentID"), New DataColumn("ChildName"), New DataColumn("ChildID")})
        dt.Rows.Add(1, "English", 0)
        dt.Rows.Add(2, "English 1", 1)
        dt.Rows.Add(3, "English 2", 1)
        dt.Rows.Add(4, "Maths", 0)
        dt.Rows.Add(5, "maths1", 4)
        dt.Rows.Add(6, "maths1.1", 5)

        Dim root As Node = New Node With {.id = ("").ToString(),
                .text = ("").ToString()}
        Dim view As DataView = New DataView(dt)
        view.RowFilter = "ChildID=0"

        For Each kvp As DataRowView In view
            Dim parentId As String = kvp("ParentID").ToString()
            Dim node As Node = New Node With {
                .id = kvp("ParentID").ToString(),
                .text = kvp("ChildName").ToString()
            }
            root.children.Add(node)
            AddChildItems(dt, node, parentId)
        Next

        Return (New System.Web.Script.Serialization.JavaScriptSerializer().Serialize(root))
    End Function

    Private Sub AddChildItems(ByVal dt As DataTable, ByVal parentNode As Node, ByVal ParentId As String)
        Dim viewItem As DataView = New DataView(dt)
        viewItem.RowFilter = "ChildID=" & ParentId

        For Each childView As DataRowView In viewItem
            Dim node As Node = New Node With {
                .id = childView("ParentID").ToString(),
                .text = childView("ChildName").ToString()
            }
            parentNode.children.Add(node)
            Dim pId As String = childView("ParentID").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
End Class

Screenshot