Telerik UI for ASP.NET Core TreeView - All nodes labeled 'undefined'

Question

I am adding a Kendo TreeView to an ASP Net Core 3.1 Page. All the nodes are 'undefined'. From the picture it is trying to do the 'right' thing. Nesting is correct, expands and contracts correctly.

Undefined with Devtools

I shamelessly used code from here

My .cshtml

    @(
        Html.Kendo().TreeView()
        .Name("treeview")
        .DataTextField("Name")
        .TemplateId("treeview-template")
        .DataSource(dataSource1 => dataSource1
            .Custom()
            .Transport(t => t
                .Read(r => r.Url(Url.Page("Index", "Read_TreeViewData")))
            )
        )
    )

and .cs

        public static IList<HierarchicalViewModel> GetHierarchicalData()
        {
            var result = new List<HierarchicalViewModel>()
            {
                new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent item" },
                new HierarchicalViewModel() { ID = 2, ParentID = 1, HasChildren = true, Name = "Parent item" },
                new HierarchicalViewModel() { ID = 3, ParentID = 1, HasChildren = false, Name = "Item" },
                new HierarchicalViewModel() { ID = 4, ParentID = 2, HasChildren = false, Name = "Item" },
                new HierarchicalViewModel() { ID = 5, ParentID = 2, HasChildren = false, Name = "Item" }
            };

            return result;
        }

        public IActionResult OnGetRead_TreeViewData(int? id)
        {
            var result = GetHierarchicalData()
                .Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
                .Select(item => new {
                    id = item.ID,
                    Name = item.Name,
                    //expanded = item.Expanded,
                    //imageUrl = item.ImageUrl,
                    hasChildren = item.HasChildren
                });

            var jr = new JsonResult(result);
            return jr;
        }

I have tried several things, changing the DataTextField, calling .Add() in several places, trying to add a attribute. Does anyone know how to label the nodes with the Name from the HierarchicalViewModel?

Answer 1

You have TemplateId("treeview-template") as part of the configuration. A template overrides anything set as DataTextField. The issue is is therefore with the template or the fact that it is missing from the page.

If you simply want the Name property rendered for each node then you can remove the template.