This is a migrated thread and some comments may be shown as answers.

Json TreeList

4 Answers 104 Views
This is a migrated thread and some comments may be shown as answers.
Naghma
Top achievements
Rank 1
Naghma asked on 14 Apr 2015, 08:00 AM

 Hi, all

I have tried to display json data in kendo treelist..but my code displaying only parent class data like nodes class only not child class i want to display items class too  please short out my problem.

 

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
        <div id="example">
            <div id="treelist"></div>

            <script>
                $(document).ready(function () {
                    var dataSource = new kendo.data.TreeListDataSource({
                        data: [
                          {"node": {
    "lastModifiedBy": "admin",
    "name": "55254b6e1e000021005873a2",
    "lastModified": "2015-04-08T15:38:22.199Z",
    "items": [{
      "lastModifiedBy": "55254b931e00001e005873aa",
      "name": "Image_0174.jpg",
      "path": "/companies/55254b6e1e000021005873a2/Image_0174.jpg",
      "size": 627042,
      "lastModified": "2015-04-09T07:16:33.516Z",
      "description": null,
      "versions": [{
        "id": "bed1e4ba-1cbc-475b-8a41-1d944b412ffe",
        "timeStamp": "2015-04-09T07:16:33.517Z"
      }, {
        "id": "49570167-2d0e-4e19-9ff3-8be5a8aecb71",
        "timeStamp": "2015-04-09T07:16:33.542Z"
      }],
      "encoding": "",
      "mimeType": "image/jpeg",
      "lastVersion": {
        "id": "49570167-2d0e-4e19-9ff3-8be5a8aecb71",
        "timeStamp": "2015-04-09T07:16:33.542Z"
      },
      "type": "File"
    }, {
      "lastModifiedBy": "55254eab1e000021005873bc",
      "name": "testo2",
      "lastModified": "2015-04-08T15:58:46.252Z",
      "items": [{
        "lastModifiedBy": "55254b931e00001e005873aa",
        "name": "newfile",
        "path": "/companies/55254b6e1e000021005873a2/testo2/newfile",
        "size": 808076,
        "lastModified": "2015-04-08T16:37:04.117Z",
        "description": null,
        "versions": [{
          "id": "d267441d-cd9b-4271-a94d-71d789483c23",
          "timeStamp": "2015-04-08T16:37:04.119Z"
        }, {
          "id": "b7acfa4a-dcbc-46da-a15f-7bb3767b2faa",
          "timeStamp": "2015-04-08T16:37:04.156Z"
        }],
        "encoding": "",
        "mimeType": "image/jpeg",
        "lastVersion": {
          "id": "b7acfa4a-dcbc-46da-a15f-7bb3767b2faa",
          "timeStamp": "2015-04-08T16:37:04.156Z"
        },
        "type": "File"
      }],
      "hasItems": true,
      "type": "Folder"
    }],
    "hasItems": true,
    "type": "Folder"
  },parentId: null}
                        ],

                        schema: {
                            model: {
                                id: "node.lastModifiedBy",
                                fields: {

                                    id: { field: "node.lastModifiedBy.items", type: "number" }
                                },
                                expanded: true
                            }
                        }
                    });

 

                    $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        height: 540,
                        columns: [
                            { field: "node.lastModifiedBy" },
                          { field: "node.name" },
                          { field: "node.lastModified" },
                          { field: "node.items.lastModifiedBy" }
                        ]
                    });
                });
            </script>
        </div>


</body>
</html>

 

 

I have attached my output..

4 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 14 Apr 2015, 09:17 AM

Hello Naghma,

The TreeListDataSource uses only flat-data binding, to self-referencing data. You need to (a) convert the data to a flat format, and (b) configure the parentId field, so that it shows how the recursive relation is achieved (parentId points to parent id for child items, or null for root items), like shown in the local binding demo.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Naghma
Top achievements
Rank 1
answered on 14 Apr 2015, 10:20 AM

Thank you so much Alex..

I have worked in wrong direction! :(

0
Naghma
Top achievements
Rank 1
answered on 15 Apr 2015, 09:28 AM

Hi  Alex,

In my system, Kendo UI is not downloading properly.In the time of downloading there is an error.

What should i do?

 

Regards,

Naghma

0
Alex Gyoshev
Telerik team
answered on 16 Apr 2015, 06:56 AM

Hello Naghma,

Does the error persist? If so, please elaborate how the error happens -- we do not have any reports for problematic downloads on our side, so please check your network connectivity and corporate policies, if downloading behind a firewall.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Naghma
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Naghma
Top achievements
Rank 1
Share this question
or