title: Integrate jsTree within my mvc 4.0 project
body: <p>I have this Category object defined like so:</p>
  
  <pre><code>public class Category
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public string Description { get; set; }
      public int ParentCategoryId { get; set; }
  }
  </code></pre>
  
  <p>I then fictively create data like so:</p>
  
  <pre><code>public ICollection&lt;Category&gt; GetCategories()
  {
      List&lt;Category&gt; lst = new List&lt;Category&gt;();
      //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 &amp; 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;
  }
  </code></pre>
  
  <p>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</p>
  
  <hr>
  
  <p>In my Controller, I fill a ViewModel (HomeModel) and then call the View.</p>
  
  <pre><code>public ActionResult Index()
  {
      Data.Data d = new Data.Data();
      var customerGroups = d.GetCustomerGroups();
  
      var model = new HomeModel();
      model.CategoryStructure = d.GetCategories();
  
      return View(model);
  }
  </code></pre>
  
  <p>The HomeModel  is define like so:</p>
  
  <pre><code>public class HomeModel
  {
      //The checkbox hierarchy structure.
      public IEnumerable&lt;Category&gt; CategoryStructure { get; set; }
  
      //The selected category Id's once submitted.
      public IEnumerable&lt;int&gt; CategorySelectList { get; set; }        
  }
  </code></pre>
  
  <p>The View is, of course, strongly typed to the HomeModel and looks somewhat like this:</p>
  
  <pre><code>…some html…
  &lt;div id="tree"&gt;
      &lt;ul id="treeview"&gt;
      @CategoryTree(Model.CategoryStructure, 0)
      &lt;/ul&gt;
  &lt;/div&gt;
  …some html…
  
  @helper CategoryTree(IEnumerable&lt;Category&gt; nodes, int? parentId)
  {
      if (nodes.Any(n =&gt; n.ParentCategoryId == parentId)) 
      { 
      &lt;ul&gt;
          @foreach (var node in nodes.Where(n =&gt; n.ParentCategoryId == parentId)) 
          {
              &lt;li&gt;
                  &lt;input type="checkbox" name="CategorySelectList" id="@node.Id" value="@node.Id" /&gt; &lt;label for="@node.Id"&gt;@node.Description&lt;/label&gt;
                  @CategoryTree(nodes, node.Id)
              &lt;/li&gt;
          }
      &lt;/ul&gt;
      }
  }
  </code></pre>
  
  <p>Everything works great! I have this beautiful list of <code>&lt;ul&gt;’s and &lt;li&gt;’s</code> nicely formatted.
  After setting up all the necessary jsTree files, I do the following:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //&lt;![CDATA[
      $(document).ready(function () {
          $("#treeview").jstree();
      });
      //]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>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”. </p>
  
  <p>How can I achieve this?</p>
  
  <p>Thanks in advance!</p>