Get Selected (Checked) Bootstrap TreeView Nodes Text on Button Click using jQuery in ASP.Net

Hi rani,

Check this example. Now please take its reference and correct your code.

HTML

<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.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 () {
        BindTreeView();
        $('#btnGet').on('click', function () {
            var checked = $('#dvTree').treeview('getChecked');
            var message = "Checked nodes are :\n";
            for (var i = 0; i < checked.length; i++) {
                message += checked[i].text + "\n";
            }
            alert(message);
        });
    });

    function BindTreeView() {
        $.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),
                    multiSelect: false,
                    showCheckbox: true,
                    onNodeChecked: function (event, data) { },
                    onNodeSelected: function (event, data) { }
                });
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>
<div id="dvTree">
</div>
<input type="button" value="Get Checked" id="btnGet" />

Namespaces

C#

using System.Data;
using System.Web.Script.Serialization;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Web.Script.Serialization
Imports System.Web.Services

Code

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)
    {
        State state = new State();
        state.checkedd = false;
        state.disabled = false;
        state.expanded = true;
        state.selected = false;

        string parentId = kvp["Id"].ToString();
        Node node = new Node { text = kvp["text"].ToString(), selectable = true, state = state };
        nodes.nodes.Add(node);
        AddChildItems(dt, node, parentId);
    }
    return (new JavaScriptSerializer()).Serialize(nodes).Replace(",\"nodes\":[]", "").Replace("checkedd", "checked");
}

private static void AddChildItems(DataTable dt, Node parentNode, string ParentId)
{
    State state = new State();
    state.checkedd = false;
    state.disabled = false;
    state.expanded = false;
    state.selected = false;

    DataView viewItem = new DataView(dt);
    viewItem.RowFilter = "ParentId=" + ParentId;
    foreach (DataRowView childView in viewItem)
    {
        Node node = new Node { text = childView["text"].ToString(), selectable = true, state = state };
        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 bool selectable { get; set; }
    public State state { get; set; }
    public List<Node> nodes { get; set; }
}

public class State
{
    public bool checkedd { get; set; }
    public bool disabled { get; set; }
    public bool expanded { get; set; }
    public bool selected { get; set; }
}

VB.Net

<WebMethod()>
Public 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, "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)
    Dim nodes As Node = New Node With {
        .text = "Department"
    }
    Dim view As DataView = New DataView(dt)
    view.RowFilter = "ParentId=0"

    For Each kvp As DataRowView In view
        Dim state As State = New State()
        state.checkedd = False
        state.disabled = False
        state.expanded = True
        state.selected = False
        Dim parentId As String = kvp("Id").ToString()
        Dim node As Node = New Node With {
            .text = kvp("text").ToString(),
            .selectable = True,
            .state = state
        }
        nodes.nodes.Add(node)
        AddChildItems(dt, node, parentId)
    Next

    Return (New JavaScriptSerializer()).Serialize(nodes).Replace(",""nodes"":[]", "").Replace("checkedd", "checked")
End Function

Private Shared Sub AddChildItems(ByVal dt As DataTable, ByVal parentNode As Node, ByVal ParentId As String)
    Dim state As State = New State()
    state.checkedd = False
    state.disabled = False
    state.expanded = False
    state.selected = False
    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 {
            .text = childView("text").ToString(),
            .selectable = True,
            .state = state
        }
        parentNode.nodes.Add(node)
        Dim pId As String = childView("Id").ToString()
        AddChildItems(dt, node, pId)
    Next
End Sub

Public Class Node
    Public Sub New()
        nodes = New List(Of Node)()
    End Sub

    Public Property id As String
    Public Property text As String
    Public Property icon As String
    Public Property selectable As Boolean
    Public Property state As State
    Public Property nodes As List(Of Node)
End Class

Public Class State
    Public Property checkedd As Boolean
    Public Property disabled As Boolean
    Public Property expanded As Boolean
    Public Property selected As Boolean
End Class

Screenshot

For more function on Bootstrap TreeView refer below link.

https://github.com/jonmiles/bootstrap-treeview