No records to display

[Yonghee]

I made a simple TreeList.

The data from the server is simple JSON array.

[{"Description":"111","id":1,"Name":"CEO"},{"Description":"222","id":2,"parentId":1,"Name":"Jane"},{"Description":"333","id":3,"Name":"Tom"},{"Description":"444","id":4,"Name":"Susan"}]

TreeList java script  code is below but this always display "No records to display"

When I remove "model" object under "schema" in DataSource It works well.

I don't know what is the problem.

Please help me to solve this proble.

 

var dataSource = new kendo.data.TreeListDataSource({
    transport : {
        read : {
            url: "ReadAsset",
            dataType: "json"
        }
},
        schema: {
            model: {
                id: "id", 
                parentId: "parentId",
                expanded: true
            }
        }
    });


    $("#treelist").kendoTreeList({
        dataSource: dataSource,
        height: "99%",
        columns: [
            { field: "Name" },
            { field: "Description" }
        ]
    });

 

 

[Nikolay]

Hello Yonghe,

Thank you for sharing the TreeList declaration.

I looked into it and noticed the ReportsTo configuration schema.model data source configuration is missing. The TreeList renders its hierarchy based on the parentId-id relationship. The data objects contain both an id and a parentId field which describe the hierarchy of the items. You can change these field names by using the schema.model definition.

    schema:{
        model:{
            parentId: "ReportsTo",
            fields:{
                ReportsTo: { type: "number", nullable: true }
            }

        }
    }

More information can be obtained in the following documentation article:

• https://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview#basic-configuration

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Alvin]

I have the same question 
Reference Nikolay solutions  can't show data too
My C# code  as follows
.aspx:
                   $(document).ready(function () {

                    var dataSource = new kendo.data.TreeListDataSource({
                          
                        transport: {
                            read: function (options) {
                                $.ajax({
                                    url: "Query.aspx/QueryData",
                                    type: "post",
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8",
                                    success: function (msg) {
                                        options.success(msg.d);

                                    },
                                    error: function (XMLHttpRequest) {
                                        return options.error(XMLHttpRequest);
                                    }
                                });
                            }
                        },
                        schema: {
                          data: "d",
                            model: {
                                 parentId: "parentId",
            
                            fields: {

                                parentId: { type: "number", nullable: true }

                                },        
                                
                                
                                expanded: true
                            }
                        }
                    });

                        $("#treelist").kendoTreeList({
                        
                        dataSource: dataSource,
                        height: 540,
                        columns: [
                                    { field: "Account" },
                                    { field: "Name" }
                        ]
                    });
                    });


.cs:
  [WebMethod]
        public static string QueryData()
        {

           List<groupName> ret2 = new List<groupName>()
            {new groupName() 
            {id=1,Account="A1",Name="A1",parentId=null },
            new groupName(){id=2,Account="A2",Name="A2",parentId=1 },
            new groupName(){id=3,Account="A3",Name="A3",parentId=2 },
            new groupName(){id=4,Account="A3",Name="A3",parentId=2 }
         return JsonConvert.SerializeObject(ret2 );
      }

 

WebMethod response data as:

d:"[{"id":1,"Name":"A1","Account":"A1","parentId":null},{"id":2,"Name":"A2","Account":"A2","parentId":1},{"id":3,"Name":"A3","Account":"A3","parentId":2},{"id":4,"Name":"A3","Account":"A3","parentId":2}]"

 

Please help find question thanks

[Nikolay]

Hello Lai,

Thank you for sharing the TreeList declaration.

I looked into it and noticed the schema model does not contain a declaration for id, for example:

schema: {
      model: {
         id: "EmployeeId",
         parentId: "ReportsTo",
         fields: {
               EmployeeId: { type: "number", nullable: false },
               ReportsTo: { field: "ReportsTo", nullable: true }
               }
          }
}

You could find a live demo in the following link:

• https://demos.telerik.com/kendo-ui/treelist/remote-data-binding

Additionally, you mentioned the project is in C# assuming it is an ASP.NET MVC or MVC Core one. If this is so is there a specific reason you are declaring the TreeList via jQuery? I would suggest switching to its HTML Helper declaration:

• MVC: https://demos.telerik.com/aspnet-mvc/treelist/remote-data-binding
• MVC Core: https://demos.telerik.com/aspnet-core/treelist/remote-data-binding

Let me know if this helps.

Regards,
Nikolay
Progress Telerik