This is a migrated thread and some comments may be shown as answers.

TreeView object binding

3 Answers 92 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 13 Nov 2018, 04:25 PM

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

3 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 14 Nov 2018, 08:22 PM

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>

 

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 14 Nov 2018, 08:29 PM

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>

 

 

 

0
Accepted
Dimitar
Telerik team
answered on 16 Nov 2018, 07:05 AM
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:


Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeView
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Dimitar
Telerik team
Share this question
or