Nested Treeview Issues

2 posts, 0 answers
  1. Wayne
    Wayne avatar
    2 posts
    Member since:
    Jul 2014

    Posted 18 Jul 2014 Link to this post

    My company is considering purchasing several licenses of Kendo UI Professional and UI for ASP.NET MVC.  I am using MVC 5 and the latest version of UI for ASP.NET MVC.  I am working with hierarchical data.   I am attempting to create the TreeView in the _Layout view and populate it with urls or action links.

    My current code:

    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(c => new
                {
                    c.ProductID,
                    c.ProductName,
                    Categories= c.Categories.Any()
                }).OrderBy(t => t.ProductName);

                return Json(result, JsonRequestBehavior.AllowGet);
            }

    I am having a number of issues:

    1.  When I expand a parent node that has children, the TreeView is hitting the action method and appending the entire tree to the child, instead of just displaying the children.
    2.  I need to be able to nest the TreeView two-deep, for example Product > Category > Type.
    3.  I am trying to figure out how to aggregate or project the data using LINQ to do a two-deep higherarchy.
    4.  I tried turning off LoadOnDemand but that made the TreeView call the action method once for each record in the Product list.

    I have tried inserting the TreeView Razor code directly into the _Layout view (not using a partial view).   I realize that I may need to move the action method into a base controller class and inherit it in every controller to stop it from appending the list to the parent node. If I cant get this working soon, I may have to either use Kendo UI Professional or an open source alternative.

    Thank you in advance for your help!
















  2. Wayne
    Wayne avatar
    2 posts
    Member since:
    Jul 2014

    Posted 19 Jul 2014 in reply to Wayne Link to this post

    The solution in code:

    The _Layout view:

    @Html.Partial("_ProductTree")


    or 

    @RenderSection("productTree", false)


    then in the content view

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

    the _ProductTree partial view

      
    @(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 a BaseController abstract class that can be inherited by any controller that needs to display the ProductTree TreeView.  The data was pulled from a ProductService and a 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 client.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 3-deep, fully populated, sorted Telerik UI for ASP.NET Treeview containing the names and IDs of Product >> Category >> ProductType.  Turning LoadOnDemand on or off did not seem to make a difference in this case.  It should make a difference when using Bind in a TreeView.

    I hope this helps!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top