Load Category and Items in Treeview

Question

Hello I am trying to load a treeview with Categories then products. I am using MVC 4 Razor.

I was finally able to load the data in seperate treeviews to see if i could at least get that.

But here is where I am now.

@(Html.Kendo().TreeView()
    .Name("treeview")
    .HtmlAttributes(new {@class="tree-section" })
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("treeItems", "Home")
        )
    )
)
<script>
    $(document).ready(function() {
        var treeview = ("#treeview").data("kendoTreeView");
    });

</script>

Here is my Controller

public JsonResult treeItems(int? id)
{
    var dataContext = new myContext();

    //var cat = from e in dataContext.Categories
    //    where (id.HasValue ? e.ParentId == id : e.ParentId == null)
    //    select new
    //    {
    //        id = e.CategoryId,
    //        Name = e.Name,
    //        hasChildren = e.Categories1.Any()
    //    };

    var prods = from c in dataContext.Items
                join a in dataContext.SubItems on c.ItemId equals a.ItemId
                where (id.HasValue ? a.ParentItemId == id : a.ParentItemId == null)
                select new
                {
                    id = c.ItemId,
                    Name = c.Name,
                    hasChildren = c.SubItems.Any()
                };
    return Json(prods, JsonRequestBehavior.AllowGet);
}

These are the two queries that work if I load them seperately into 2 different trees, but I want the Categories --> SubCategory --> Item ----> SubItem

Here is a sample snippet of the model

How can I load this correctly?

Answer 1

to bind a kendo tree view use the kendo built in view model for tree view called

Kendo.Mvc.UI.TreeViewItemModel

and here is the solution

public ActionResult GetAllTreeData()
{
    var treeItems = new List<Kendo.Mvc.UI.TreeViewItemModel>();
    var categories = from category in this.dataContext.Categories
                     select category;
    var products = from Item in this.dataContext.Items
                   select Item;
    var allCategoryList = categories.toList();
    var allItems = products.ToList();

    if (allItems == null)
    {
        allItems = new List<Item>();
    }

    if (allCategoryList != null && allCategoryList.count() > 0)
    {
        foreach (var category in allCategoryList)
        {
            treeItems.Add(new Kendo.Mvc.UI.TreeViewItemModel()
            {
                Id = category.Id.ToString(),
                Text = category.Name
            });
        }

        foreach (var node in treeItems)
        {
            var items = products.Where(x => x.CategoryId == Convert.ToInt32(node.Id)).ToList();
            if (items.Any())
            {
                foreach (var item in items)
                {
                    var parentItem = new Kendo.Mvc.UI.TreeViewItemModel()
                    {
                        Id = item.Id.ToString(),
                        Text = item.Name
                    };

                    this.BuildTreeRecursive(allItems, parentItem);
                    treeItems.Add(parentItem);
                }
            }
        }
    }
}

public void BuildTreeRecursive(IEnumerable<Item> allItems, Kendo.Mvc.UI.TreeViewItemModel parentNode)
{
    parentNode.HasChildren = true;

    var nodes = allItems
        .Where(x => x.ParentItemId == Convert.ToInt32(parentNode.Id))
        .Select(p => new TreeViewItemModel 
        { 
            Text = p.Name, 
            Id = p.Id.ToString(CultureInfo.InvariantCulture) 
        });
    foreach (var node in nodes)
    {
        parentNode.Items.Add(node);
        this.BuildTreeRecursive(allItems, node);
    }
}