No records to display in Telerik's TreeList With Razor Page

[Vi]

Template code:

@(Html.Kendo().TreeList<EmployeeDirectoryModel>()
    .Name("treelist")
    .Toolbar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Add().Field(e => e.FirstName).Title("First Name").Width(220);
        columns.Add().Field(e => e.LastName).Title("Last Name").Width(200);
        columns.Add().Field(e => e.Position);
        columns.Add().Field(e => e.HireDate).Format("{0:MMMM d, yyyy}");
        columns.Add().Width(350).Command(c =>
        {
            c.CreateChild().Text("Add child");
            c.Edit();
            c.Destroy();
        })
        .HtmlAttributes(new
        {
            style = "text-align: center;"
        });
    })
    .Editable()
    .DataSource(dataSource => dataSource
        .Read(r => r.Url("/Employees/Index?handler=Read").Data("forgeryToken")) // Specify the url to the OnPostRead method.
        .Update(u => u.Url("/Employees/Index?handler=Update").Data("forgeryToken"))
        .Create(c => c.Url("/Employees/Index?handler=Create").Data("forgeryToken"))
        .Destroy(d => d.Url("/Employees/Index?handler=Destroy").Data("forgeryToken"))
        .Model(m =>
        {
            m.Id(f => f.EmployeeId); // Provide the Id property of the model.
            m.ParentId(f => f.ReportsTo); // Provide the Child Id property of the model.
            m.Expanded(false); // Set to true if you want the TreeList to be expanded by default.
            m.Field(f => f.FirstName);
            m.Field(f => f.LastName);
            m.Field(f => f.ReportsTo);
            m.Field(f => f.HireDate);
            m.Field(f => f.Position);
        })
    )
    .Height(540)
)

Headers request:

Response: 

{
    "data": [
        {
            "employeeId": 1,
            "firstName": "Daryl",
            "lastName": "Sweeney",
            "reportsTo": null,
            "position": "CEO",
            "hasChildren": false,
            "hireDate": "2022-02-19T14:02:27.590078+07:00"
        },
        {
            "employeeId": 2,
            "firstName": "Guy",
            "lastName": "Wooten",
            "reportsTo": 1,
            "position": "Chief Technical Officer",
            "hasChildren": false,
            "hireDate": "2022-02-20T14:02:27.590084+07:00"
        },
        {
            "employeeId": 3,
            "firstName": "Buffy",
            "lastName": "Weber",
            "reportsTo": 2,
            "position": "VP, Engineering",
            "hasChildren": false,
            "hireDate": "2022-02-21T14:02:27.5900853+07:00"
        },
        {
            "employeeId": 4,
            "firstName": "Hyacinth",
            "lastName": "Hood",
            "reportsTo": 3,
            "position": "Team Lead",
            "hasChildren": false,
            "hireDate": "2022-02-22T14:02:27.5900856+07:00"
        },
        {
            "employeeId": 5,
            "firstName": "Akeem",
            "lastName": "Carr",
            "reportsTo": 4,
            "position": "Junior Software Developer",
            "hasChildren": false,
            "hireDate": "2022-02-23T14:02:27.590086+07:00"
        },
        {
            "employeeId": 6,
            "firstName": "Rinah",
            "lastName": "Simon",
            "reportsTo": null,
            "position": "Software Developer",
            "hasChildren": false,
            "hireDate": "2022-02-24T14:02:27.5900865+07:00"
        },
        {
            "employeeId": 7,
            "firstName": "Gage",
            "lastName": "Daniels",
            "reportsTo": 6,
            "position": "Software Architect",
            "hasChildren": false,
            "hireDate": "2022-02-25T14:02:27.5900868+07:00"
        },
        {
            "employeeId": 8,
            "firstName": "Constance",
            "lastName": "Vazquez",
            "reportsTo": 6,
            "position": "Director, Engineering",
            "hasChildren": false,
            "hireDate": "2022-02-26T14:02:27.5900871+07:00"
        },
        {
            "employeeId": 9,
            "firstName": "Darrel",
            "lastName": "Solis",
            "reportsTo": 8,
            "position": "Team Lead",
            "hasChildren": false,
            "hireDate": "2022-02-27T14:02:27.5900874+07:00"
        },
        {
            "employeeId": 10,
            "firstName": "Brian",
            "lastName": "Yang",
            "reportsTo": 9,
            "position": "Senior Software Developer",
            "hasChildren": false,
            "hireDate": "2022-02-28T14:02:27.5900878+07:00"
        },
        {
            "employeeId": 11,
            "firstName": "Lillian",
            "lastName": "Bradshaw",
            "reportsTo": 9,
            "position": "Software Developer",
            "hasChildren": false,
            "hireDate": "2022-03-01T14:02:27.5900882+07:00"
        }
    ],
    "total": 11,
    "aggregateResults": {},
    "errors": null
}

UI result:

[Aleksandar]

Hello Vi,

From the screenshots provided it appears the JSON serialization is not configured and the endpoint is returning data in camelCase instead of the expected PascalCase. Read more on how to configure the JSON serialization settings here:

JSON Serialization configuration

Regards,
Aleksandar
Progress Telerik

[Vi]

Thanks Aleksandar