Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Binding more complex data to Treeview

1 Answer 151 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 1
Ivan asked on 22 Sep 2015, 07:32 PM

Hi Guys,

 I am having a bit of trouble binding the treeview to some JSON returned by a REST datasource. The JSON looks like this:

{
    "Links": {
    },
    "Items": [
        {
            "WebId": "E0PDGvCF_JoUerHmn03UKDRg4BjcATte5RGJsgBQVrI8IgR0xPQkFMIEFGIEFDQ0VQVEFOQ0UgRU5WSVJPTk1FTlRcU0hFTExcR0FTMQ",
            "Id": "01dc18e0-5e3b-11e5-89b2-005056b23c22",
            "Name": "Gas1",
            "Description": "",
            "Path": "\\\\Global AF Acceptance Environment\\Company\\Gas1",
            "TemplateName": "Gas",
            "CategoryNames": [],
            "Links": {
            }
        },
        {
            "WebId": "E0PDGvCF_JoUerHmn03UKDRgoJxXIDte5RGJsgBQVrI8IgR0xPQkFMIEFGIEFDQ0VQVEFOQ0UgRU5WSVJPTk1FTlRcU0hFTExcR0FTMg",
            "Id": "20579ca0-5e3b-11e5-89b2-005056b23c22",
            "Name": "Gas2",
            "Description": "",
            "Path": "\\\\Global AF Acceptance Environment\\Company\\Gas2",
            "TemplateName": "Gas",
            "CategoryNames": [],
            "Links": {
            }
        },
        {
            "WebId": "E0PDGvCF_JoUerHmn03UKDRg_fTxOXkq5RGHhgBQVrI8IgR0xPQkFMIEFGIEFDQ0VQVEFOQ0UgRU5WSVJPTk1FTlRcU0hFTExcUk9PVCBET1dOU1RSRUFN",
            "Id": "39f1f4fd-2a79-11e5-8786-005056b23c22",
            "Name": "Root Downstream",
            "Description": "",
            "Path": "\\\\Global AF Acceptance Environment\\Company\\Root Downstream",
            "TemplateName": "",
            "CategoryNames": [],
            "Links": {
            }
        },
        {
            "WebId": "E0PDGvCF_JoUerHmn03UKDRgThKq6zpe5RGJsgBQVrI8IgR0xPQkFMIEFGIEFDQ0VQVEFOQ0UgRU5WSVJPTk1FTlRcU0hFTExcV0FURVIgSU5KRUNUT1Iy",
            "Id": "ebaa124e-5e3a-11e5-89b2-005056b23c22",
            "Name": "Water Injector2",
            "Description": "",
            "Path": "\\\\Global AF Acceptance Environment\\Company\\Water Injector2",
            "TemplateName": "Water Injector",
            "CategoryNames": [],
            "Links": {
            }
        }
    ]
}

 

But I don't know how to adapt the Treeview example to show the "Name" as the labels in the treeview and bind to the hierarchical data source. Do I need to use the Datasource.Parse functionality to extract the "Items" to kind of flatten the JSON? Many thanks for any suggestions.

<body>
     
        <a class="offline-button" href="../index.html">Back</a>
     
            <div id="example">
            <div class="demo-section k-header">
                <div id="treeview"></div>
            </div>
            <script>
                    homogeneous = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot + "/Elements",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            model: {
                                id: "WebID",
                                hasChildren: "Links"
                            }
                        }
                    });
 
                $("#treeview").kendoTreeView({
                    dataSource: homogeneous,
                    dataTextField: "Name"
                });
            </script>
        </div>
 
 
     
</body>

1 Answer, 1 is accepted

Sort by
0
Ivan
Top achievements
Rank 1
answered on 24 Sep 2015, 04:16 PM

OK, I figured it out, I needed to parse out the child items. It works great now.

 

var dataSource = new kendo.data.HierarchicalDataSource({
       transport: {
           read: {
               dataType: "json"
           }
       },
        schema   : {
               parse: function (data) {
                   return data.Items;
               },
               model: {
                   id: "WebId",
                   hasChildren: true
               }
           }
                
   });

Tags
General Discussions
Asked by
Ivan
Top achievements
Rank 1
Answers by
Ivan
Top achievements
Rank 1
Share this question
or