Search (Filter) TreeView on TextBox change in ASP.Net using jQuery Ajax

guhananth
 
on Nov 28, 2021 10:08 PM
Sample_526994.zip
680 Views

Hi,

how to create nodes by using jsonresult from search textbox. treeview must have checkbox.

i have MyClient.js file. text is textbox, myclient is div tag to form tree view

function() {
('#text').blur({
    var = ('#text').val(); //returned me null
    ('#myclient').jstree(){
    }

please help.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 29, 2021 06:32 AM
on Dec 03, 2021 12:14 AM

Hi guhananth,

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

Database

I have made use of the following tables with the schema as follows.

VehicleTypes

Hierarchical TreeView using jQuery in ASP.Net MVC

Hierarchical TreeView using jQuery in ASP.Net MVC

VehicleSubTypes

Hierarchical TreeView using jQuery in ASP.Net MVC

 Hierarchical TreeView using jQuery in ASP.Net MVC

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<input type="text" id="txtType" />
<div id="jstree"></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="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.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 () {
        BindJsTree('');
        $('#txtType').on('change', function () {
            BindJsTree($(this).val());
        });
    });

    function BindJsTree(typeVehicle) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: "{vehicleType:'" + typeVehicle + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var json = JSON.parse(response.d);
                $("#jstree").jstree("destroy");
                $('#jstree').jstree({
                    'core': {
                        'data': json,
                        'themes': { "variant": "large" },
                    },
                    'checkbox': { "keep_selected_style": false },
                    'plugins': ["wholerow", "checkbox"]
                });
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>

Namespaces

C#

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

VB.Net

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

Code

C#

[WebMethod]
public static string GetData(string vehicleType)
{
    VehiclesDBEntities entities = new VehiclesDBEntities();
    List<VehicleType> vehicleTypes = entities.VehicleTypes.ToList();
    List<VehicleSubType> vehicleSubTypes = new List<VehicleSubType>();
    if (!string.IsNullOrEmpty(vehicleType.Trim()))
    {
        vehicleTypes = vehicleTypes.Where(x => x.Name.ToLower() == vehicleType.Trim().ToLower()).ToList();
    }

    List<TreeViewNode> nodes = new List<TreeViewNode>();
    foreach (VehicleType type in vehicleTypes)
    {
        nodes.Add(new TreeViewNode
        {
            id = type.Id.ToString(),
            parent = "#",
            text = type.Name
        });
        vehicleSubTypes.AddRange(entities.VehicleSubTypes.Where(x => x.VehicleTypeId == type.Id).ToList());
    }

    foreach (VehicleSubType subType in vehicleSubTypes)
    {
        nodes.Add(new TreeViewNode
        {
            id = subType.VehicleTypeId.ToString() + "-" + subType.Id.ToString(),
            parent = subType.VehicleTypeId.ToString(),
            text = subType.Name
        });
    }

    return (new JavaScriptSerializer()).Serialize(nodes);
}

public class TreeViewNode
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}

VB.Net

<WebMethod>
Public Shared Function GetData(ByVal vehicleType As String) As String
    Dim entities As VehiclesDBEntities = New VehiclesDBEntities()
    Dim vehicleTypes As List(Of VehicleType) = entities.VehicleTypes.ToList()
    Dim vehicleSubTypes As List(Of VehicleSubType) = New List(Of VehicleSubType)()

    If Not String.IsNullOrEmpty(vehicleType.Trim()) Then
        vehicleTypes = vehicleTypes.Where(Function(x) x.Name.ToLower() = vehicleType.Trim().ToLower()).ToList()
    End If

    Dim nodes As List(Of TreeViewNode) = New List(Of TreeViewNode)()
    For Each type As VehicleType In vehicleTypes
        nodes.Add(New TreeViewNode With {
            .id = type.Id.ToString(),
            .parent = "#",
            .text = type.Name
        })
        vehicleSubTypes.AddRange(entities.VehicleSubTypes.Where(Function(x) x.VehicleTypeId = type.Id).ToList())
    Next

    For Each subType As VehicleSubType In vehicleSubTypes
        nodes.Add(New TreeViewNode With {
            .id = subType.VehicleTypeId.ToString() & "-" + subType.Id.ToString(),
            .parent = subType.VehicleTypeId.ToString(),
            .text = subType.Name
        })
    Next

    Return (New JavaScriptSerializer()).Serialize(nodes)
End Function

Public Class TreeViewNode
    Public Property id As String
    Public Property parent As String
    Public Property text As String
End Class

Screenshot