Kendo Tree View display no records on getting json result from controller

Question

I am working on kendo TreeView control and trying to display tree structure in the grid. I am getting the json data from controller Action Method but control always display an error message "No records to display" Could any one please help me to identify my mistake.

Below is my javascript code.

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var modelId = $("#hdnModelId").val();
        var dataSource = new kendo.data.TreeListDataSource({
            transport: {
                read: {
                    url: "/EntityData/GetEntities",
                    dataType: "json",
                    data: { modelId: modelId }
                }
            },
            schema: {
                model: {
                    id: "EntityId",
                    parentId: "ParentEntityId",
                    fields:
                        {
                            Name: { field: "Name", type: "string" },
                            EntityId: { type: "number", editable: false, nullable: false },
                            ParentEntityId: { field: "ParentEntityId", nullable: true}
                        },
                }
            }
        });
        
        $("#treelist").kendoTreeList({
            dataSource: dataSource,
            columns: [{ field: "Name" }]
        });       
    });

    
</script>

.

Below is my Action Method.

    [HttpGet]
    public ActionResult GetEntities(int modelId)
    {            
        var entities = metaDataService.GetEntitiesByModelId(modelId).ToList();
        return Json(new { Data = entities }, JsonRequestBehavior.AllowGet);
    }

Below is the Json data which I am getting from my Action Method.

{"Data":[{"EntityId":1,"ApplicationId":2,"Name":"Car","Description":"This entity describes a car.!","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":20,"ApplicationId":2,"Name":"Test 567","Description":"Test 567!","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":21,"ApplicationId":2,"Name":"Test Tst Entity","Description":"Test Tst Entity1234","IsPublished":true,"IsDeleted":false,"ParentEntityId":1,"HasChildren":true},{"EntityId":23,"ApplicationId":2,"Name":"Test New Entity","Description":"Test New Entity","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":46,"ApplicationId":2,"Name":"Kendo Entity Test","Description":"Kendo Entity Test","IsPublished":true,"IsDeleted":false,"ParentEntityId":null,"HasChildren":false},{"EntityId":63,"ApplicationId":2,"Name":"Test new Entity","Description":"Test New Entity","IsPublished":true,"IsDeleted":false,"ParentEntityId":20,"HasChildren":true}]}

Any help is highly appreciated

Thanks in advance

Answer 1

Try addind this to your schema:

schema: {
    data: "Data"

You have to tell the DataSource which property in your json the array is.