Json TreeList

5 posts, 1 answers
  1. Naghma
    Naghma avatar
    3 posts
    Member since:
    Apr 2015

    Posted 14 Apr 2015 Link to this post

     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..

  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 14 Apr 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Naghma
    Naghma avatar
    3 posts
    Member since:
    Apr 2015

    Posted 14 Apr 2015 in reply to Alex Gyoshev Link to this post

    Thank you so much Alex..

    I have worked in wrong direction! :(

  5. Naghma
    Naghma avatar
    3 posts
    Member since:
    Apr 2015

    Posted 15 Apr 2015 in reply to Alex Gyoshev Link to this post

    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

  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 16 Apr 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready