Question

I’m currently using what is essentially a copy of the “Remote data” example from the Kendo UI Treeview documentation… however I seem to be having a problem with loading any child nodes.

View:

<div class="treeview">
    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Pages", "Page", new { Area = "Admin" })
            )
        )
    )
</div>

Method:

public JsonResult Pages(int? id)
{
    var pages = _page.Items;

    if(id.HasValue)
    {
        pages = pages.Where(u => u.Parent.Id == id);
    }
    else
    {
        pages = pages.Where(u => u.Parent == null);
    }


    var pagesToReturn = from p in pages
                        select new {
                            id = p.Id,
                            text = p.Title,
                            hasChildren = p.Children.Any()
                        };

    return Json(pagesToReturn, JsonRequestBehavior.AllowGet);
}

However for some reason, clicking to expand a node doesn’t seem to actually do anything. If I use Firefox’s Net tab to see data transfer, I can see that it is actually going to the method and returning the correct JSON for the child nodes, but nothing is actually being added to the treeview!

I’m not really sure what to try in terms of debugging it, I’m really stumped. Any help/directions would be appreciated.

Answer 1

Does the loading animation appears when you click the expand button?

By the way, you used “Name” in the DataTextField but as I can see on your jSon, it is not defined. It will give you “undefined” nodes. Try replacing it with “text“.

.DataTextField("text")