Jstree more than 2 level tree - html

Question

I have a system Every user has role and Id And some user has parent , i want to show this tree by Jstree but when I fetch data from database, just show 2 level for me,how can i expand it to show whole tree in my system?
This is My Action In Controller:
public async Task<IActionResult> Index2Async()
{
List<TreeViewNode> nodes = new List<TreeViewNode>();
//Loop and add the Parent Nodes.
//get roots
foreach(var user in userManager.Users)
{
var checkUserIsEmployee = applicationDbContext.EmployeeInRoles.Where(s => s.UserId == user.Id).ToList().Count;
if (checkUserIsEmployee>0)
{
continue;
}
else
{
nodes.Add(new TreeViewNode { id = user.Id, parent = "#", text = user.Name + " " + user.Family });
}
}
//end get roots
//Loop and add the Child Nodes.
//get child
foreach (var user in userManager.Users)
{
var Employee = applicationDbContext.EmployeeInRoles.ToList();
foreach (var item in Employee)
{
if (user.Id == item.UserId)
{
var ParentRole = roleManager.Roles.SingleOrDefault(s => s.Id == item.RoleId);
foreach(var parent in userManager.Users)
{
if (await userManager.IsInRoleAsync(parent, ParentRole.Name))
{
nodes.Add(new TreeViewNode { id = user.Id + "-" + parent.Id, parent = parent.Id, text = user.Name+" "+user.Family });
}
}
}
}
}
//end get child
//Serialize to JSON string.
ViewBag.Json = JsonConvert.SerializeObject(nodes);
return View();
}
This is cshtml file (Index2):
<link rel="stylesheet" href="~/jstree/dist/themes/default/style.min.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/jstree/dist/jstree.min.js"></script>
<div style="color:#fff" id="jstree">
</div>
<form method="post" asp-controller="Admin" asp-action="Index2">
<input type="hidden" name="selectedItems" id="selectedItems" />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
jQuery(function ($) {
$('#jstree').on('changed.jstree', function (e, data) {
var i, j;
var selectedItems = [];
var postedItems = [];
for(i = 0, j = data.selected.length; i < j; i++) {
//Fetch the Id.
var id = data.selected[i];
//Remove the ParentId.
if(id.indexOf('-') != -1){
id = id.split("-")[1];
}
//Add the Node to the JSON Array.
selectedItems.push({
text: data.instance.get_node(data.selected[i]).text,
id: id,
parent: data.node.parents[0]
});
}
//Serialize the JSON Array and save in HiddenField.
$('#selectedItems').val(JSON.stringify(selectedItems));
}).jstree({
"core": {
"themes": {
"variant": "large"
},
"data": #Html.Raw(ViewBag.Json)
},
"checkbox": {
"keep_selected_style": false
},
"plugins": ["wholerow", "checkbox"],
});
});
This is model:
public class TreeViewNode
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
}
And the result is below: