TreeView object binding

[Joel]

I have not seen an example on how to bind the TreeView to an object.  I have a simple class that looks like this:

class Group
{
    int id,
    string name,
    List<Group> children
}

Can you provide me with an example?

Thanks in advance for your help, Joel

[Joel]

I renamed my class to Item instead of Group... but same idea.

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.text #
    # if (!item.items) { #
    <a class='delete-link' href='\#'></a>
    # } #
</script>

<div class="demo-section k-content">
    <h4>Recursive data</h4>
    @(
    Html.Kendo().TreeView()
        .TemplateId("treeview-template")
        .Name("treeview-right")
        .BindTo((IEnumerable<Item>)ViewBag.recursive, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<Item>(binding => binding.ItemDataBound((item, category) =>
            {
                item.Text = category.Name;
                item.ImageUrl = category.ImageUrl;
            })
                .Children(category => category.Items));
        })
          )
</div>

 

[Joel]

A more complete answer:

HomeController.cs

public IActionResult Hierarchy()
{
    ViewData["Message"] = "Your application description page.";

    ViewBag.recursive = GetRecursiveData();
    return View();
}

 

The Data method

private IEnumerable<Item> GetRecursiveData()
        {
            List<Item> inline = new List<Item>
            {
                new Item
                {
                    Name = "Storage",
                    ImageUrl = "~/images/Customer.PNG",
                    Items = new List<Item>
                    {
                        new Item()
                        {
                            Name = "Wall Shelving",
                            ImageUrl = "~/images/StoreFront.PNG",
                            Items = new List<Item>
                            {
                                new Item()
                                {
                                    Name = "Sub Wall Shelving",
                                    ImageUrl = "~/images/Test.PNG"
                                },
                                new Item
                                {
                                    Name = "Sub Floor Shelving",
                                    ImageUrl = "~/images/Test.PNG"
                                },
                                new Item
                                {
                                    Name = "Sub Kids Storag",
                                    ImageUrl = "~/images/Test.PNG"
                                }
                            }
                        },
                        new Item
                        {
                            Name = "Floor Shelving",
                            ImageUrl = "~/images/StoreFront.PNG"
                        },
                        new Item
                        {
                            Name = "Kids Storag",
                            ImageUrl = "~/images/StoreFront.PNG"
                        }
                    }
                }
            };

            return inline;
        }

The TreeView (again, renamed group instead of category)

<script type="text/javascript">

    $(document).on("click", ".delete-link", function (e) {
        e.preventDefault();

        var treeview = $("#treeview").data("treeview-right");
        treeview.remove($(this).closest(".k-item"));
    });

</script>

<script id="treeview-template" type="text/kendo-ui-template">
    #: item.text #
    # if (!item.items) { #
    <a class='delete-link' href='\#'></a>
    # } #
</script>

<div class="demo-section k-content">
    <h4>Recursive data</h4>
    @(
    Html.Kendo().TreeView()
        .TemplateId("treeview-template")
        .Name("treeview-right")
        .BindTo((IEnumerable<Item>)ViewBag.recursive, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<Item>(binding => binding.ItemDataBound((item, group) =>
            {
                item.Text = group.Name;
                item.ImageUrl = group.ImageUrl;
            })
                .Children(group => group.Items));
        })
          )
</div>

 

 

 

[Dimitar]

Hello Joel,

After specifying the child nodes through the .Children() option, a second mapping for the child collection should be added. For example if we take the following model:

public class ParentModel
{
  public string Name { get; set; }

  public List<ChildModel> Categories;
}

We can map the bindings for it as follows:

mappings.For<ParentModel>(binding => binding.ItemDataBound((item, parent) =>
{
  item.Text = parent.Name;
})
.Children(category => category.Categories));

mappings.For<ChildModel>(binding => binding.ItemDataBound((item, child) =>
{
   item.Text = child.Name;
}));

In addition to the above, you could also refer to the following TreeView Demo for ASP.NET MVC, where binding through the NavigationBindingFactory interface is also demonstrated:

• Local Binding Demo.

Regards,
Dimitar
Progress Telerik