Telerik UI (Kendo) for ASP.NET MVC TreeView Tasks

Question

I am using MVC 5 and the latest Telerik (formerly Kendo) user interface for ASP.NET MVC. I work with hierarchical data. I am trying to create a TreeView in _Layout view and populate it with urls or action links.

My current code is:

In the _Layout view:

@Html.Partial("_ProductTree") 

"_ ProductTree" Partial view:

 @(Html.Kendo().TreeView().Name("ProductTree") .DataSource(d => d .Model(m => m .Id("ProductId") .HasChildren("Categories")) .Read(r => r.Action("_ProductTree", "Home"))) .DataTextField("ProductName")) 

Action method:

 [ActionName("_ProductTree")] public JsonResult GetProductTree() { var products = _productBusinessService.GetProducts(); var result = products.Select(p => new { p.ProductID, p.ProductName, Categories= c.Categories.Any() }).OrderBy(t => t.ProductName); return Json(result, JsonRequestBehavior.AllowGet); } 

I have a number of problems:

• When I extend a parent node that has children, the TreeView clicks on the action method and adds the entire tree to the child, rather than just displaying the children.
• I need to be able to insert a TreeView in two depths, for example Product> Category> Type.
• I am trying to figure out how to aggregate or project data using LINQ to make a two-digit height.
• I tried disabling LoadOnDemand, but this caused TreeView to call the action method once for each entry in the product list.

I tried to insert the TreeView Razor code directly into the _Layout view (without using a partial view). I understand that I may need to move the action method to the base controller class and inherit it on each controller so that it does not add the list to the parent node. If I can't get this to work soon, I may have to use Kendo UI Professional or an open source alternative.

Some of you may be tempted to say that this question has been answered elsewhere. None of the messages I found address the problem of filling and displaying embedded (more than one deep) hierarchical data using Telerik TreeView.

This message

Nested data sources and TreeView with kendo ui

But this is the JavaScript version of the TreeView (and not the UI for MVC), and it has not been answered.

Thank you in advance for your help!

Answer 1

Solution in code:

_Layout view:

 @Html.Partial("_ProductTree") 

or

 @RenderSection("productTree", false) 

then in content view

 @section productTree { @Html.Partial("_ProductTree") } 

partial view _ProductTree

 @(Html.Kendo().TreeView().Name("ProductTree") .DataSource(d => d .Model(m => m .Id("Id") .HasChildren("HasChildren") .Children("Children")) .Read(r => r.Action("_ProductTree", "Home"))) .DataTextField("Name")) 

I moved the action method to the abstract BaseController class, which can be inherited by any controller that needs to display the ProductTree TreeView. The data was pulled from ProductService and CategoryService and aggregated using LINQ projection into anonymous objects:

  [ActionName("_ProductTree")] public JsonResult GetProductData() { var products = _productBusinessService.GetProducts(); foreach (var product in product) { foreach (var category in product.Categories) { category.ProductTypes = _productService.GetProductTypes(category.CategoryId); } } var productTreeData = products.Select(p => new { Id = p.ProductId, Name = p.ProductName, HasChildren = p.Categories.Any(), Children = p.Categories.Select(c => new { Id = c.CategoryId, Name = c.CategoryName, HasChildren = c.ProductTypes.Any(), Children = c.ProductTypes.Select(t => new { Id = t.ProductTypeId, Name = t.ProductTypeName, HasChildren = false }).OrderBy(t => t.Name).ToList() }).OrderBy(c => c.Name).ToList() }).OrderBy(p => p.Name).ToList(); return Json(productTreeData, JsonRequestBehavior.AllowGet); } 

The result is a three-dimensional, fully populated, sorted Telerik user interface for ASP.NET Treeview, containing product names and identifiers → Category → ProductType. Turning the LoadOnDemand function on and off did not help in this case. This should make a difference when using Bind in a TreeView.

Hope this helps!