KendoUI treeview children are displayed as undefined

Question

I have a treeview in kendoUI in which main nodes are calling into an mvc controller and that controller looks to whether there is an nullable id passed in and then uses a different model.

What I hit the url : http://localhost:2949/Report/GetReportGroupAssignments

I see this JSON

[
    {"Id":1,"ReportGroupName":"Standard Reports","ReportGroupNameResID":null,"SortOrder":1},
    {"Id":2,"ReportGroupName":"Custom Reports","ReportGroupNameResID":null,"SortOrder":2},
    {"Id":3,"ReportGroupName":"Retail Reports","ReportGroupNameResID":null,"SortOrder":3},
    {"Id":4,"ReportGroupName":"Admin Reports","ReportGroupNameResID":null,"SortOrder":5},
    {"Id":5,"ReportGroupName":"QA Reports","ReportGroupNameResID":null,"SortOrder":4}
]

Now my mvc controller looks like this

public JsonResult GetReportGroupAssignments(int? id)
{
    var model = new List<ReportGroup>();
    var defModel = new List<ReportDefinition>();

    try
    {
        if (id == null)
        {
            model = _reportService.GetReportGroups("en-us").ToList();
            return Json(model, JsonRequestBehavior.AllowGet);
        }
        else
        {
            defModel = _reportService.GetReportDefinitions().Where(e=>e.ReportGroupID ==Convert.ToInt32(id)).ToList();
            return Json(defModel, JsonRequestBehavior.AllowGet);
        }   
    }
    catch (Exception ex)
    {
        Logger.Error(ex, "Error loading LoadReportList.");
        return null;
    }
}

My Kendo javascript looks like the following:

var serviceRoot = "/Report"; // "//demos.telerik.com/kendo-ui/service";
homogeneous = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: serviceRoot + "/GetReportGroupAssignments", //"/LoadReportTree", // "/Employees",
            dataType: "json" 
        }
    },
    schema: {
        model: {
            id: "Id" //"ReportGroupName"
            ,hasChildren: "Id"
        }
    }
});

var treeview = $("#treeview").kendoTreeView({
    expanded: true,
    dragAndDrop: true,
    dataSource: homogeneous,
    dataTextField: "ReportGroupName" 

}).data("kendoTreeView");

Seems that the calls (which I discovered that children records have a "load" method that it called behind the seens, so basically I pass in the ID in order to get the data from the other model ( table in db)
(Id is mapped with automapper to ReportGroupID )

So when i click to the left of "Standard Rports" I am getting all of these children as undefined, How do I get these to show up properly?

Update: My ReportDefinition class:

public class ReportDefinition {
    public override int Id { get; set; } 
    public string ReportKey { get; set; } 
    public string ReportName { get; set; } 
    public int? ReportNameResID { get; set; } 
    public string ReportDef { get; set; } 
    public int? ReportDefinitionResID { get; set; } 
    public string ReportAssembly { get; set; } 
    public string ReportClass { get; set; } 
    public int ReportGroupID { get; set; } 
    public int AppID { get; set; } 
    public int SortOrder { get; set; } 
    public bool IsSubReport { get; set; }
} 

Answer 1

I think your problem is that the class ReportDefinition does not have a property called: ReportGroupName. That is why TreeView displays 'undefined'.

Try adding this Property to your ReportDefinition class like:

public class ReportDefinition {

    // Other Properties

    // I guess this property is missing
    public string ReportGroupName { get; set; }

}