I have this Category object defined like so:
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int ParentCategoryId { get; set; }
}
I then fictively create data like so:
public ICollection<Category> GetCategories()
{
List<Category> lst = new List<Category>();
//Top
lst.Add(new Category { Id = 1, Name = "Car", Description = "Car", ParentCategoryId = 0 });
lst.Add(new Category { Id = 2, Name = "Boats", Description = "Boats", ParentCategoryId = 0 });
//Catalogs
lst.Add(new Category { Id = 3, Name = "Winter2012", Description = "Parts & Accessories", ParentCategoryId = 1 });
lst.Add(new Category { Id = 4, Name = "Gear2012", Description = "Gear", ParentCategoryId = 1 });
//Categories
lst.Add(new Category { Id = 5, Name = "NewItems", Description = "New Stuff", ParentCategoryId = 3 });
lst.Add(new Category { Id = 6, Name = "Promo1", Description = "Promo1", ParentCategoryId = 3 });
lst.Add(new Category { Id = 7, Name = "Promo2", Description = "Promo2", ParentCategoryId = 3 });
//Sub-Categories (if any)
lst.Add(new Category { Id = 8, Name = "Men", Description = "Men", ParentCategoryId = 5 });
lst.Add(new Category { Id = 9, Name = "Women", Description = "Women", ParentCategoryId = 5 });
lst.Add(new Category { Id = 10, Name = "Kids", Description = "Kids", ParentCategoryId = 5 });
return lst;
}
I’m trying to build a checkbox TreeView and currently looking at the jsTree plugin. In the end, the treeview looks somewhat like: Top-->Catalogs-->Categories-->Sub-Categories
In my Controller, I fill a ViewModel (HomeModel) and then call the View.
public ActionResult Index()
{
Data.Data d = new Data.Data();
var customerGroups = d.GetCustomerGroups();
var model = new HomeModel();
model.CategoryStructure = d.GetCategories();
return View(model);
}
The HomeModel is define like so:
public class HomeModel
{
//The checkbox hierarchy structure.
public IEnumerable<Category> CategoryStructure { get; set; }
//The selected category Id's once submitted.
public IEnumerable<int> CategorySelectList { get; set; }
}
The View is, of course, strongly typed to the HomeModel and looks somewhat like this:
…some html…
<div id="tree">
<ul id="treeview">
@CategoryTree(Model.CategoryStructure, 0)
</ul>
</div>
…some html…
@helper CategoryTree(IEnumerable<Category> nodes, int? parentId)
{
if (nodes.Any(n => n.ParentCategoryId == parentId))
{
<ul>
@foreach (var node in nodes.Where(n => n.ParentCategoryId == parentId))
{
<li>
<input type="checkbox" name="CategorySelectList" id="@node.Id" value="@node.Id" /> <label for="@node.Id">@node.Description</label>
@CategoryTree(nodes, node.Id)
</li>
}
</ul>
}
}
Everything works great! I have this beautiful list of <ul>’s and <li>’s
nicely formatted.
After setting up all the necessary jsTree files, I do the following:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#treeview").jstree();
});
//]]>
</script>
The jsTree plugin seems to apply nicely to my manually built treeview but the basic “clicking a parent node does not check/select all the child nodes”.
How can I achieve this?
Thanks in advance!