Hi @Guhananth S ,
You only need to use the standard jQuery-like AJAX configuration, and jstree will automatically make the AJAX request fill the tree with the response.
To render the checkbox icon, use the plugin configuration option and add the name of the plugin to the array.
For details, you can refer to the following code
MyClient.js file:153235-myclientjs.txt
JsTreeDemo,cshtml
@{
Layout = null;
}
<!D OC TY PE html>
<html>
<head>
<m eta name="viewport" content="width=device-width" />
<title>JsTree Demo</title>
<link rel="stylesheet" h re f="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" h r ef="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<sc ript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></s cript>
<sc ript src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></sc ript>
<s cr ipt src="~/MyClient.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
JsTree Demo
</div>
<input type="text" id="textbox">
<div class="panel-body">
<div id="MyClient">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
HomeController :
[HttpGet]
public ActionResult JsTreeDemo()
{
return View();
}
public Js onResult Nodes()
{
var nodes = new List<JsTreeModel>();
nodes.Add(new JsTreeModel() { id = "101", parent = "#", text = "Kunal" });
nodes.Add(new JsTreeModel() { id = "102", parent = "#", text = "Root node 1" });
nodes.Add(new JsTreeModel() { id = "103", parent = "102", text = "Child 1" });
nodes.Add(new JsTreeModel() { id = "104", parent = "102", text = "Child 2" });
return Json(nodes, JsonR eque s tB ehavior.AllowGet);
}
Model:
public class JsTreeModel
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
}
The result:
Best regards,
Lan Huang
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.