1

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!

1 Answer 1

2

You have to add in your jstree script in order to get the checkboxes working fine:

$("#tree").jstree({
    checkbox: {
        real_checkboxes: true,
        real_checkboxes_names: function (n) { 
            return [("check_" + (n[0].id || Math.ceil(Math.random() * 10000))), n[0].id] 
        }
    },
    plugins: ["html_data", "types", "themes", "ui", "checkbox"]
});

Your checkboxes will have the Id of the li statement so you don't have to add them manually. When checked, the Ids will be submitted automatically within the FormCollection.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.