Adding parent and child to Kendo UI controller using MVC 5 - model-view-controller

Question

I am using MVC 5 with Kendo UI(Latest Version) and SQL Server 2014, and I want to add a treeview controller that will display parent items and child items when users click on the parent item. I have two classes:
1.Category
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ProductTreeView.Models
{
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<Product> Products { get; set; }
}
}
2.Product
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ProductTreeView.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public virtual Category Category { get; set; }
public int CategoryId { get; set; }
}
}
My controller action looks like this:
public ActionResult Products(int? id)
{
var model = db.Categories
.Select(p => new {
id = p.Id,
Name = p.Name,
hasChildren = p.Products.Any()
});
return this.Json(model, JsonRequestBehavior.AllowGet);
}
And the HTML looks like this:
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="row">
<div class="col-md-3">
<label class="k-label-top">TreeView</label>
#(Html.Kendo().TreeView().Name("treeview")
.DataSource(datasource => datasource
.Read(read => read.Action("Products", "Categories"))
).DataTextField("Name")
)
</div>
</div>
The result is parent items within parent items, looping.
Results

Answer 1

That is a self referencing example you might use for employees/managers. You need the more classical way where you provide the child products in a collection.
public ActionResult Products(int? id)
{
var model = db.Categories
.Select(p => new {
id = p.Id,
Name = p.Name,
hasChildren = p.Products.Any(),
Children = p.Products
});
return this.Json(model, JsonRequestBehavior.AllowGet);
}
Then something like:
#(Html.Kendo().TreeView().Name("treeview")
.DataSource(d => d
.Model(m => m
.Id("Id")
.HasChildren("hasChildren")
.Children("Children"))
.Read(r => r.Action("Products", "Categories")))
.DataTextField("Name"))
http://demos.telerik.com/kendo-ui/treeview/local-data-binding