I am using JsTree on my project. I want to do like that:
I want to show just root nodes when tree loaded first time after I want to show sub-nodes when I clicked root node (+) or of sub-node. I mean, I want to get from database and add to the sub-nodes when I clicked every node.
How can I do that in Asp.Net MVC? I looked almost every JsTree Ajax sample. But I couldn't do that. What should I return from action? How should I do my action Please help!
JsTree: https://www.jstree.com/
Samples:
Finally, I found the problem!
I created a Model:
public class JsTreeModel
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
public bool children { get; set; } // if node has sub-nodes set true or not set false
}
I created a controller like following:
public class TreeviewController : Controller
{
public JsonResult GetRoot()
{
List<JsTreeModel> items = GetTree();
return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public JsonResult GetChildren(string id)
{
List<JsTreeModel> items = GetTree(id);
return new JsonResult { Data = items, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
static List<JsTreeModel> GetTree()
{
var items = new List<JsTreeModel>();
// set items in here
return items;
}
static List<JsTreeModel> GetTree(string id)
{
var items = new List<JsTreeModel>();
// set items in here
return items;
}
}
Html:
<div id='treeview'></div>Script:
$('#treeview').jstree({
"plugins": ["search", "wholerow"],
'core': {
'data': {
'url': function (node) {
return node.id === '#' ? "/Treeview/GetRoot" : "/Treeview/GetChildren/" + node.id;
},
'data': function (node) {
return { 'id': node.id };
}
}
}
});
$('#treeview').on('changed.jstree', function (e, data) {
console.log("=> selected node: " + data.node.id);
});
Example with just one action method and lazy loading nodes. Just in case that someone needs to use jsTree with Asp.Net Mvc.
cshtml View:
<div data-key="@Model.Key" id="object-children-tree">
@* Content will be populated by jsTree *@
</div>
<script type="text/javascript">
$(function() {
var $children = $("#object-children-tree");
$children.jstree({
"core": {
"animation": 0,
"data": {
"url": function(node) {
return '@Url.Action("GetChildren", "Object")';
},
"data": function (node) {
// Each time jstree needs to make an AJAX call this function will be called.
// It adds 'key' and 'isRoot' as parameter to ajax call. See signature of 'GetChildren' method.
// # is the special ID that the function receives when jstree needs to load the root nodes.
var isRoot = false;
var key = node.id;
if (key === "#") {
isRoot = true;
key = $("#object-children-tree").data("key");
}
return { "key": key, "isRoot": isRoot };
}
}
},
"plugins": ["wholerow"]
});
});
</script>
C#, 'Object' controller:
[HttpGet]
public JsonResult GetChildren(string key, bool isRoot)
{
// Populates the tree using AJAX and lazy loading nodes.
// Lazy loading makes it possible to load nodes on the fly.
// jstree will perform AJAX requests as the user browses the tree.
//
// children = true, this special value indicated to jstree, that it has to lazy load the child node node.
// https://github.com/vakata/jstree#populating-the-tree-using-ajax
if (isRoot)
{
var first = new[]
{
new
{
id = "root-id",
text = "Selected object in the list",
state = new
{
opened = true,
},
children = new[]
{
new
{
id = "child-1",
text = "Child 1",
children = true
},
new
{
id = "child-2",
text = "Child 2",
children = true
}
}
}
}
.ToList();
return new JsonResult { Data = first, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
var g1 = Guid.NewGuid().ToString();
var g2 = Guid.NewGuid().ToString();
var next = new[]
{
new
{
id = "child-" + g1,
text = "Child " + g1,
children = true
},
new {
id = "child-" + g2,
text = "Child " + g2,
children = true
}
}
.ToList();
return new JsonResult { Data = next, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
After first call:
After child node was clicked:
