Loading Treeview control

[Saloni]

I am using angular1.0 and kendo UI controls and trying to populate the tree view all at once. Need help on loading the treeview control. I am struggling to load the child nodes. My api call returns this

"[{\"Item\":\"National\",\"StationName\":[{\"Item\":\"A\"}]},{\"Item\":\"San Francisco\",\"StationName\":[{\"Item\":\"B\"},{\"Item\":\"C\"},{\"Item\":\"KCBS-AM\"}]},{\"Item\":\"Los Angeles\",\"StationName\":[{\"Item\":\"D\"},{\"Item\":\"E\"},{\"Item\":\"F\"},{\"Item\":\"G\"},{\"Item\":\"H\"}]},{\"Item\":\"Seattle\",\"StationName\":[{\"Item\":\"I\"},{\"Item\":\"J\"}]}]"

This is on my js (controller) file

 
   $scope.treeData = new kendo.data.HierarchicalDataSource({
       transport: {
           read: {
               url: 'api/stationdata/GetStationData',
               dataType: "json",
               contentType:"application/json"
           },
           schema: {
               model: {
                   id: "item",
                   children: "stationName"
               }
           }
       }
   });

 

this is on my html

 <div kendo-tree-view="tree"

                         k-data-source="treeData"
                         k-on-change="selectedItem = dataItem">
                        <span k-template>
                           {{dataItem.item}}{{dataItem.stationName}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
                        </span>
                    </div>

 

Attacched is the screen shot of what I see. How do I get the child node to display ?

 

[Saloni]

I want to add to the above question that this is what is returned from my api call

<string xmlns="http://schemas.microsoft.com/2003/10/Serialization/">[{"Item":"National","StationName":[{"Item":"CRS-DMG Local Commerce"}],"HasStation":true},{"Item":"San Francisco","StationName":[{"Item":"KMVQ-FM Digital"},{"Item":"KMVQ-FM"},{"Item":"KCBS-AM"}],"HasStation":true},{"Item":"Los Angeles","StationName":[{"Item":"KCBS-AM Digital"},{"Item":"KROQ-FM Digital"},{"Item":"KNX-AM Digital"},{"Item":"KNX-AM"},{"Item":"KROQ-FM"}],"HasStation":true},{"Item":"Seattle","StationName":[{"Item":"KFNQ-FM Digital"},{"Item":"KFNQ-AM"}],"HasStation":true}]</string>

 

Now, I get the error item.level is not a function. any help ?

[Stefan]

Hello Saloni,

I noticed that the data is not returned in a valid JSON format. Please strip the data from the <string> tag. Also, I made small adjustments to the data in order to display it correctly in the TreeView. Check the following example demonstrating the result after the adjustments to the data:

http://dojo.telerik.com/aBOpO

Also, I can suggest checking the information for the Kendo UI HierarchicalDataSource:

http://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/overview 

Please modify the response from the server and advice if the issue still persists.

Regards,
Stefan
Telerik by Progress