Hi AbdulHaque,
Using this article i have created the example.
Controller
public class TreeViewNode
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
public State state { get; set; }
}
public class State
{
public bool selected { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
List<TreeViewNode> nodes = new List<TreeViewNode>();
VehiclesEntities entities = new VehiclesEntities();
foreach (VehicleType type in entities.VehicleTypes)
{
State checkState = new State();
checkState.selected = SelectedNodes().Contains(type.Name) ? true : false;
nodes.Add(new TreeViewNode
{
id = type.Id.ToString(),
parent = "#",
text = type.Name
});
}
foreach (VehicleSubType subType in entities.VehicleSubTypes)
{
State checkState = new State();
checkState.selected = SelectedNodes().Contains(subType.Name) ? true : false;
nodes.Add(new TreeViewNode
{
id = subType.VehicleTypeId.ToString() + "-" + subType.Id.ToString(),
parent = subType.VehicleTypeId.ToString(),
text = subType.Name,
state = checkState
});
}
ViewBag.Json = (new System.Web.Script.Serialization.JavaScriptSerializer()).Serialize(nodes);
return View();
}
[HttpPost]
public ActionResult Index(string selectedItems)
{
List<TreeViewNode> items = (new System.Web.Script.Serialization.JavaScriptSerializer()).Deserialize<List<TreeViewNode>>(selectedItems);
return RedirectToAction("Index");
}
public List<string> SelectedNodes()
{
List<string> nodes = new List<string>();
nodes.Add("Scorpio");
nodes.Add("Duster");
nodes.Add("Discover");
nodes.Add("Avenger");
nodes.Add("Unicorn");
nodes.Add("Karizma");
return nodes;
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="jstree">
</div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<input type="hidden" name="selectedItems" id="selectedItems" />
<input type="submit" value="Submit" />
}
<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 () {
$('#jstree').on('changed.jstree', function (e, data) {
var i, j;
var selectedItems = [];
for(i = 0, j = data.selected.length; i < j; i++) {
var id = data.selected[i];
var parent;
var nodeId;
if(id.indexOf('-') != -1){
nodeId = id.split("-")[1];
parent = id.split("-")[0];
} else {
nodeId = id;
parent = "#";
}
selectedItems.push({
text: data.instance.get_node(data.selected[i]).text,
id: nodeId,
parent: parent
});
}
$('#selectedItems').val(JSON.stringify(selectedItems));
}).jstree({
"checkbox": { "keep_selected_style": false },
"plugins": ["wholerow", "checkbox"],
"core": {
"themes": { "variant": "large" },
"data": @Html.Raw(ViewBag.Json)
}
});
});
</script>
</body>
</html>
Screenshot
